我想模拟对 anchor 标记的点击以及正确的目标处理等所有额外功能。
anchor 的 DOM 对象似乎有一个“[click()][3]”方法，但并非所有浏览器都支持该方法。 Firefox 抛出此错误:
Error: anchorObj.click is not a function
它在 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):
<!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 属性(remains unchanged during propagation)检查启动模拟点击的事件对象，从而避免非 IE 浏览器中的递归。
显然，IE 会在内部持有对其 global event object 的引用。 . DOM 级别 2 没有定义这样的全局变量，因此模拟器必须传入 event 的本地副本。
关于javascript - 如何模拟对 anchor 标记的点击？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1421584/