问题描述
我想模拟对锚标记的点击,以及正确的目标处理等所有附加功能.
锚的 DOM 对象似乎有一个[click()][3]"方法,但并非所有浏览器都支持.Firefox 抛出此错误:
错误:anchorObj.click 不是函数
它在 Opera 10 和 Konqueror 上的工作也很奇怪,当它在周围 div 的 onclick 处理程序中调用时会导致无限点击.我猜只有 IE8 可以正常工作.无论如何,我不想要它,因为主要浏览器大多有问题.
我在 Mozilla 论坛中找到了 Firefox 的替代解决方案:
var evt = document.createEvent("MouseEvents");evt.initMouseEvent("click", true, true, window,0, 0, 0, 0, 0, false, false, false, false, 0, null);anchorObj.dispatchEvent(evt);
这对我来说太难看太麻烦了.我不知道它的兼容性如何,我想尽可能避免编写浏览器特定的代码.
我不能使用 location.href = anchorObj.href;因为它不处理目标"属性.我可以根据目标的值进行一些硬编码,但我也想避免这种情况.
有人建议改用 JQuery,但我不确定它处理目标属性的效果如何,因为我以前没有使用过它.
这是一个完整的测试用例,它模拟 click
事件,调用所有附加的处理程序(无论它们是否已附加),维护"target"
属性(IE 中的 "srcElement"
),像普通事件一样冒泡,并模拟 IE 的递归预防.在 FF 2、Chrome 2.0、Opera 9.10 和 IE (6) 中测试:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><头><脚本>函数fakeClick(事件,anchorObj){如果(anchorObj.click){anchorObj.click()} else if(document.createEvent) {if(event.target !== anchorObj) {var evt = document.createEvent("MouseEvents");evt.initMouseEvent("click", true, true, window,0, 0, 0, 0, 0, false, false, false, false, 0, null);var allowDefault = anchorObj.dispatchEvent(evt);//您可以检查 allowDefault 为 false 以查看是否//任何名为 evt.preventDefault() 的处理程序.//Firefox *不会*重定向到anchorObj.href//为你.但是,其他所有浏览器都会.}}}头部><身体><div onclick="alert('Container clicked')"><a id="link" href="#" onclick="alert((event.target || event.srcElement).innerHTML)">普通链接</a>