JS模拟点击提交表单的跨浏览器兼容方案

标准按钮模拟点击方案

在实际应用开发中，JavaScript模拟事件处理十分常见，但有时会遇到特定的兼容性问题。例如，我们需要点击位于表单外部的“提交”按钮来触发表单提交操作。下面通过代码示例进行说明。

HTML结构如下：

 
<h3>请单击“提交”，测试提交按钮的单击事件也被触发了。</h3>
<button id="btn">提交</button>
<form action="#" method="get" id="form">
<input type="text" name="site" value="www.woiweb.net" readonly/>
<input id="subbtn" type="submit" value="先别点击此按钮提交" onclick="alert('我已经提交了');"/>
</form>

JavaScript实现部分：

 
<script type="javascript">
var sub = document.getElementById("subbtn");
var btn = document.getElementById("btn");
//通用方法
btn.onclick = function() {
sub.click();
} 
</script>

经测试，该方案在IE、Firefox、Chrome、Opera及Safari等主流浏览器中均能正常运行，表单可成功提交。

a标签模拟按钮的兼容性问题

然而在实际前端设计中，为了美化提交按钮，开发者常使用a标签配合背景图片来模拟按钮外观。若沿用上述思路，仅修改HTML结构，增加一个a标签来触发提交，代码如下。

修改后的HTML结构：

 
<h3>请单击“提交”，测试提交按钮的单击事件也被触发了。</h3>
<button id="btn">提交</button>
<form action="#" method="get" id="form">
<input type="text" name="site" value="www.woiweb.net" readonly/>
<!--<input id="subbtn" type="submit" value="先别点击此按钮提交" onclick="alert('我已经提交了');"/> -->
<a id="subbtn" href="javascript:;" onclick="alert('在此调用提交表单的方法')">模拟提交按钮</a>
</form>

对应的JavaScript逻辑：

 
<script type="javascript">
var sub = document.getElementById("subbtn");
var btn = document.getElementById("btn");
//通用方法
btn.onclick = function() {
sub.click();
} 
</script>

运行后发现，虽然IE、Firefox和Opera表现正常，但Chrome和Safari无法执行提交操作。经查阅资料发现，a标签并不像submit按钮那样具备直接的click()事件触发机制。解决方案是区分浏览器类型，针对IE和Firefox编写不同的逻辑，JavaScript代码如下：

跨浏览器兼容解决方案

JavaScript代码：

 
<script type="javascript">
var sub = document.getElementById("subbtn");
var btn = document.getElementById("btn");
//通用方法
btn.onclick = function() {
//sub.click();
if (/msie/i.test(navigator.userAgent)) //IE
{ 
sub.fireEvent("onclick");
} else {
var e = document.createEvent('MouseEvent');
e.initEvent('click', false, false);
sub.dispatchEvent(e);
} 
} 
</script>

至此，问题得到解决。虽然该技巧看似简单，却容易被忽视，特此分享。

createEvent方法详解

语法说明：

createEvent(eventType)

参数描述

eventType 指定要获取的Event对象的事件模块名。关于有效的事件类型列表，请参阅“说明”部分。

返回值

返回新创建的Event对象，其类型由指定参数决定。

抛出

若实现不支持所需的事件类型，该方法将抛出代码为NOT_SUPPORTED_ERR的DOMException异常。

说明

该方法用于创建指定类型的新事件。注意，参数eventType的值并非事件接口的名称，而是定义该接口的DOM模块名称。

下表列出了eventType的合法值及对应的事件接口：

参数 事件接口 初始化方法

HTMLEvents HTMLEvent iniEvent()

MouseEvents MouseEvent iniMouseEvent()

UIEvents UIEvent iniUIEvent()

创建Event对象后，必须使用表中所示的初始化方法进行初始化。详细信息请参阅Event对象参考文档。

该方法实际上由DocumentEvent接口定义，而非Document接口。若实现支持Event模块，则Document对象需实现DocumentEvent接口以支持此方法。