js模拟点击事件实现代码

时间：2021-07-05 09:20:52|栏目：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>

Javscript:

复制代码代码如下:

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

经过测试，IE，FF，Chrome，Opera，Safari都没有问题，均可正常提交表单。

但在实际的设计中，为了让提交按钮更好看，buildder经常把它们用a标签来处理，加个背景图片来模拟按钮，我们仍然用上面的思路来尝试，增加一个a标签，让它来提交表单，我们仅修改html。

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="text/javascript"> 
 
var sub = document.getElementById("subbtn"); 
 
var btn = document.getElementById("btn"); 
 
//通用方法 
 
btn.onclick = function() { 
 
sub.click(); 
 
} 
 
</script>

运行后，问题出现了，IE、FF、Opera均OK，但Chrome和Safari不能正常运行，后来网上搜索了下，发现a标签并不是和按钮一样有onclick()事件的，解决办法是针对 IE 和 FF编写不同的逻辑，JS代码如下：
javascript:

复制代码代码如下:

 
<script type="text/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>