JavaScript 模拟点击事件实现：兼容IE与Firefox

JavaScript模拟点击事件概述

通常情况下，模拟点击操作主要涉及两个方面：一是模拟超级链接的点击事件，二是针对普通HTML元素的点击模拟。对于Firefox浏览器，其兼容方案涉及对HTMLAnchorElement对象添加onclick事件的处理逻辑。

try {
// 创建元素以便访问HTMLAnchorElement
document.createElement('a');
HTMLElement.prototype.click = function () {
if (typeof this.onclick == 'function') {
if (this.onclick({type: 'click'}) && this.href)
window.open(this.href, this.target? this.target : '_self');
} 
else if (this.href)
window.open(this.href, this.target? this.target : '_self');
}; 
} 
catch (e) {
// alert('click method for HTMLAnchorElement couldn\'t be added');
} 

链接点击的兼容实现

以下是具体的应用场景示例。

普通HTML元素的点击模拟

如果是针对普通HTML元素添加点击功能，

这段代码旨在使Firefox浏览器的HTMLElement具备click方法（add click method to HTMLElement in Mozilla）。

try {
// 创建span元素以便访问HTMLElement
document.createElement('span');
HTMLElement.prototype.click = function () {
if (typeof this.onclick == 'function')
this.onclick({type: 'click'});
}; 
} 
catch (e) {
// alert('click method for HTMLElement couldn\'t be added');
} 

此外，网友的其他相关文章也可供参考。

表单回车提交的模拟方案

最近在开发中发现，用户在网页输入框中按回车键的行为表现并不固定。

特别是在网页包含多个表单的情况下，

因此搜索并找到了一段模拟点击的JS代码，经测试可在Firefox和IE浏览器上正常运行。

 
function doClick(linkId, e){
if(e.keyCode != 13){
return;
} 
var fireOnThis = document.getElementById(linkId)
if (document.createEvent)
{ 
var evObj = document.createEvent('MouseEvents')
evObj.initEvent( 'click', true, false )
fireOnThis.dispatchEvent(evObj)
} 
else if (document.createEventObject)
{ 
fireOnThis.fireEvent('onclick')
} 
} 

其中e代表event内置对象，linkId指代被模拟点击对象的ID。

例如<INPUT id="test" onkeypress="doClick("buttonId", event)">

这样即可让用户通过按回车键来提交表单。

Opera浏览器的适配修改

Opera浏览器可在此基础上稍作修改，

 
<img id="a" src="/a.jpg" onclick="alert('a');"/><div onclick="clickObj('a')">click me</div>
<script language="javascript">
<!-- 
function clickObj(o){
var o = document.getElementById(o);
if( document.all && typeof( document.all ) == "object" ) //IE
{ 
o.fireEvent("onclick");
} 
else
{ 
var e = document.createEvent('MouseEvent');
e.initEvent('click',false,false);
o.dispatchEvent(e);
} 
} 
//--> 
</script>