如何模拟点击到锚标签？

我想模拟一个点击锚点标签与所有额外项目，如正确的目标处理。如何模拟点击到锚标签？

似乎有一个“[click（）] [3]”方法的锚点的DOM对象，但不是所有的浏览器都支持。火狐抛出这个错误：

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，但我不知道它处理目标属性有多好，因为我以前没有使用它。

来源

2009-09-14 Sedat Kapanoglu

[JavaScript：调用JavaScript中的锚点标记的点击事件]的可能重复（http://stackoverflow.com/questions/980709/javascript-invoking-click-event-of-an-anchor-tag-from -javascript） – 2017-05-02 23:23:56

这里是模拟click事件的完整测试情况下，调用连接的所有处理（但是他们已经附后），维持"target"属性（"srcElement"在IE），气泡等不会正常事件，并模仿IE的recursion-预防。在FF 2，铬2.0测试，歌剧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>

Demo here.

它通过检查正在启动模拟点击事件对象避免了在非IE浏览器递归，通过检查事件的target属性（其中remains unchanged during propagation）。

很显然，IE在内部持有对global event object的引用。 DOM级别2没有定义这样的全局变量，因此模拟器必须通过event的本地副本。

来源

2009-09-14 14:37:00

更新：从现在开始initMouseEvent已弃用请参阅[https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/initMouseEvent]（https://developer.mozilla.org/ en-US/docs/Web/API/MouseEvent/initMouseEvent）使用自定义事件，而不是[https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events]（https://developer。 mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events） – user2315552 2016-08-22 11:29:59

好了，你可以非常快速地通过jQuery测试点击调度像这样

$('#link-id').click();

如果你仍然有问题点击尊重的目标，你总是可以做到这一点

$('#link-id').click(function(event, anchor) 
{ 
    window.open(anchor.href, anchor.target, ''); 
    event.preventDefault(); 
    return false; 
});

来源

2009-09-14 14:04:22

引自https://developer.mozilla.org/en/DOM/element.click

The click method is intended to be used with INPUT elements of type button, checkbox, radio, reset or submit. Gecko does not implement the click method on other elements that might be expected to respond to mouse–clicks such as links (A elements), nor will it necessarily fire the click event of other elements.

Non–Gecko DOMs may behave differently.

不幸的是，它听起来像你有alrea dy发现了你的问题的最佳解决方案。作为一个方面说明，我同意你的解决方案看起来不太理想，但是如果你在方法中封装了功能（很像JQuery那样），它并不是那么糟糕。

来源

2009-09-14 14:05:38

还有一个更简单的方法去实现它，

HTML

<a href="https://getbootstrap.com/" id="fooLinkID" target="_blank">Bootstrap is life !</a>

的JavaScript

// Simulating click after 3 seconds 
setTimeout(function(){ 
    document.getElementById('fooLinkID').click(); 
}, 3 * 1000);

使用纯JavaScript与解决目标属性沿着模拟点击。

你可以在这里查询jsFiddle的工作示例。

来源

2017-04-11 16:20:22

如何模拟点击到锚标签？

回答

相关问题