如何模拟点击锚定标签？ [英] How can I simulate a click to an anchor tag?
问题描述
似乎有一个[click（）] [3] anchor的DOM对象的方法，但不是所有的浏览器都支持。 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 ;因为它不处理target属性。我可以根据目标的价值做一些硬编码，但是我也想避免这样做。
有建议切换到JQuery，但我不知道如何好的，它处理目标属性，因为我之前没有使用过。
这是一个完整的测试用例， 单击事件，调用附加的所有处理程序（但是已经附加），维护target属性（srcElement在IE中），像正常事件一样的气泡将会模拟IE的递归预防。测试在FF 2，Chrome 2.0，Opera 9.10和当然IE（6）：
<！DOCTYPE html PUBLIC // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< script>
函数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）;
//您可以检查allowDefault是否为false，以查看
//任何名为evt.preventDefault（）的处理程序。
// Firefox will * not * redirect to anchorObj.href
// for you。不过每一个浏览器都会。
}
}
}
< / script>
< / head>
< body>
< div onclick =alert（'Container clicked'）>
< a id =linkhref =＃onclick =alert（（event.target || event.srcElement）.innerHTML）>正常链接< / a>
< / div>
< button type =buttononclick =fakeClick（event，document.getElementById（'link'））>
假点击正常链接
< / button>
< br />< br />
< div onclick =alert（'Container clicked'）>
< div onclick =fakeClick（event，this.getElementsByTagName（'a'）[0]）>< a id =link2href =＃onclick =alert（'foo' ）>嵌入式链接< / a>< / div>
< / div>
< button type =buttononclick =fakeClick（event，document.getElementById（'link2'））>假单击嵌入式链接< / button>
< / body>
< / html>
通过检查启动模拟点击的事件对象，通过检查
显然，IE内部持有对其全局事件对象。 DOM级别2不定义任何这样的全局变量，因此，模拟器必须通过其本地副本事件。
I want to simulate a click to an anchor tag with all extras like correct target handling.
There seems to be a "[click()][3]" method for anchor's DOM object but not all browsers support that. Firefox throws this error:
Error: anchorObj.click is not a function
It also works strangely on Opera 10 and Konqueror, causing infinite clicks to happen when it's called inside onclick handler of a surrounding div. I guess only IE8 works fine with it. Anyway I don't want it since major browsers mostly have problems with it.
I found this alternate solution for Firefox in Mozilla forums:
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);
This seems too ugly and cumbersome for me. I don't know how compatible it is and I want to avoid writing browser specific code as much as possible.
I can't use location.href = anchorObj.href; because it doesn't handle "target" attribute. I can do some hard coding based on target's value but I'd like to avoid that as well.
There is suggestion of switching to JQuery but I'm not sure how well it handles target property either since I haven't worked with it before.
Here is a complete test case that simulates the click event, calls all handlers attached (however they have been attached), maintains the "target" attribute ("srcElement" in IE), bubbles like a normal event would, and emulates IE's recursion-prevention. Tested in FF 2, Chrome 2.0, Opera 9.10 and of course 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>
It avoids recursion in non-IE browsers by inspecting the event object that is initiating the simulated click, by inspecting the target attribute of the event (which remains unchanged during propagation).
Obviously IE does this internally holding a reference to its global event object. DOM level 2 defines no such global variable, so for that reason the simulator must pass in its local copy of event.
这篇关于如何模拟点击锚定标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
