我想模拟对锚标签的点击,并带有所有类似正确目标处理之类的功能。
锚点的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"属性("srcElement"在IE中),像正常事件一样冒泡并模拟IE的递归预防。经过FF 2,Chrome 2.0,Opera 9.10和IE(6)的测试:
click
"target"
"srcElement"
<!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"> <head> <script> function fakeClick(event, anchorObj) { if (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); // you can check allowDefault for false to see if // any handler called evt.preventDefault(). // Firefox will *not* redirect to anchorObj.href // for you. However every other browser will. } } } </script> </head> <body> <div onclick="alert('Container clicked')"> <a id="link" href="#" onclick="alert((event.target || event.srcElement).innerHTML)">Normal link</a> </div> <button type="button" onclick="fakeClick(event, document.getElementById('link'))"> Fake Click on Normal Link </button> <br /><br /> <div onclick="alert('Container clicked')"> <div onclick="fakeClick(event, this.getElementsByTagName('a')[0])"><a id="link2" href="#" onclick="alert('foo')">Embedded Link</a></div> </div> <button type="button" onclick="fakeClick(event, document.getElementById('link2'))">Fake Click on Embedded Link</button> </body> </html>
演示在这里。
通过检查引发模拟点击的事件对象,检查事件的target属性(在传播过程中保持不变),它避免了在非IE浏览器中的递归。
target
显然IE会在内部进行对其全局event对象的引用。DOM级别2没有定义此类全局变量,因此出于这个原因,模拟器必须传递其的本地副本event。
event