safari浏览器绑定div的click事件的方法
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
如何给元素绑定click点击事件
2011-07-22
最简单的莫过于使用click方法：
1 2
所有浏览器都弹出了1。但是如果把input换成div呢？
1 id="d1"style="background:gold;width:50px;height:50px;"onclick="ale rt(2)">
2
这次Safari/Chrome中没有弹出2。即不是所有浏览器中的所有元素都支持click方法。事实上只有input/button元素在所有浏览器才具有click方法。
以上的事件都是直接添加在html属性中的（内联事件）。click方法能触发使用
el.onXXX/addEventListener/attachEvent添加的事件吗？
01
02
03
所有浏览器都依次弹出了3,4。说明支持click方法的元素，无论使用内联方式还是el.onXX又或addEventListener/attachEvent添加事件都能触发。
click方法已经写入了HTML5草案，如果Safari/Chrome完成对剩下的元素的实现（非
input/button）。那么模拟点击将十分简单，直接调用click方法。Firefox也是刚刚在版本5中实现对非input/button元素的click方法实现，这点Safari/Chrome有些落后了。
既然Safari/Chrome中click不可用，我们就用dispatchEvent来实现了。
01 02
0 3 id="d1"style="background:gold;width:50px;height:50px;"onclick="ale rt(3)">
04
依次弹出了1,2,3。换成其它事件添加方式亦可触发。IE中还有个fireEvent去主动触发事件，当然如果是点击事件使用click更好。非点击事件则只能通过fireEvent去触发了。
最后给出我的triggerClick方法，实现方式判断浏览器，判断nodeName。依据是Safari/Chrome 不支持非input/button元素的click方法。
01function triggerClick( el ) {
02 var nodeName = el.nodeName,
03 safari_chrome =
/webkit/.test(erAgent.toLowerCase());
04 if(safari_chrome && (nodeName != 'INPUT'||