是否可以通过 JavaScript 触发链接(或任何元素)的点击事件?

IT技术 javascript
2021-02-04 14:02:55

我正在编写一些需要click为链接触发事件的JavaScript 代码在 Internet Explorer 中,我可以这样做

var button = document.getElementById('myButton');
button.click();

但这在 Firefox 中不起作用,我假设任何其他浏览器。在 Firefox 中,我已经这样做了

var button = document.getElementById('myButton');
window.location = button.href;

我觉得这不是最好的方法。有没有更好的方法来触发click事件?最好是无论元素类型或浏览器如何都可以工作的东西。

6个回答

http://jehiah.cz/archive/firing-javascript-events-properly

function fireEvent(element,event) {
   if (document.createEvent) {
       // dispatch for firefox + others
       var evt = document.createEvent("HTMLEvents");
       evt.initEvent(event, true, true ); // event type,bubbling,cancelable
       return !element.dispatchEvent(evt);
   } else {
       // dispatch for IE
       var evt = document.createEventObject();
       return element.fireEvent('on'+event,evt)
   }
}
根据经验,通常最好先检查标准功能(例如createEvent),然后再检查专有功能(例如createEventObject)。
2021-03-23 14:02:55
为什么要否定 的返回值element.dispatchEvent()双方element.dispatchEventelement.fireEvent返回false,如果事件被取消了,否则真。
2021-03-24 14:02:55

我不推荐它,但您可以将 HTML 元素的 onclick 属性作为方法调用。

<a id="my-link" href="#" onclick="alert('Hello world');">My link</a>

document.getElementById('my-link').onclick();

这通常是不可能的,afaik,mozilla 有click()方法,但仅用于输入元素,而不是链接。

为什么不创建一个按钮将在 onClick 处理程序上调用的函数,并且每当您想“单击”按钮时调用该函数呢?

Mozilla 对允许的 JS 操作/事件有更严格的政策 - 我也有与 click() 事件类似的问题。它在某些元素上被禁用以防止 XSS。

重定向浏览器有什么问题?这个灵魂无处不在。

嘿,我不是要挖掘旧线程 - 但我也在寻找同样问题的答案,并发现了 jQuery 1.3x 的新功能(我在使用 Ajax 加载内容时遇到问题)

这是我如何实施它:

HTML

<a class="navlink" href="mypage.html">Online Estimate</a>

加载脚本

$(".pagelink").click(function(){
    $(".navlink[href="+$(this).attr("href")+"]").trigger('click');
    return false;
});

加载的 HTML

<a class="pagelink" href="mypage.html">Online Estimate</a>

该功能是“触发事件”......
有关它的更多详细信息:http : //docs.jquery.com/Events/trigger#eventdata

这不会在 100% 的时间内对每个元素都完美地工作。例如,它不会导航到 href 中的值,即使您在那里有内容。Chris MacDonald 的示例适用于每个元素并触发默认操作,例如导航到href一个锚标记。
2021-03-17 14:02:55
jquery 的答案无关紧要,因为该问题仅使用 javascript 标记。我对你的回答投反对票的原因。
2021-03-17 14:02:55
这是非常正确的。我正在使用'return false;',并绕过实际的链接元素功能,因为我正在使用 jQuery 和 Ajax 将内容加载到 DOM 中。在这种情况下,它是最少的代码和最干净的解决方案 - 但在丹赫伯特指出的许多其他情况下,克里斯麦克唐纳将是首选。
2021-03-25 14:02:55