如何以编程方式单击 JavaScript 中的元素？

Question

在 IE 中，我可以从 JavaScript 调用 element.click() - 如何在 Firefox 中完成相同的任务？ 理想情况下，我希望有一些可以在跨浏览器上同样工作的 JavaScript，但如果有必要，我将为此使用不同的每个浏览器 JavaScript。

Answer 1

document.createEvent 文档 说“< strong>createEvent 方法已弃用。使用事件构造函数。 ”

所以你应该改用这个方法：

var clickEvent = new MouseEvent("click", {
    "view": window,
    "bubbles": true,
    "cancelable": false
});

并在这样的元素上触发它：

element.dispatchEvent(clickEvent);

如图所示 此处。

Answer 2

对于 Firefox 链接似乎是“特殊的”。 我能够完成这项工作的唯一方法是使用 MDN 上描述的 createEvent 并调用 initMouseEvent 函数。 即使这并没有完全起作用，我不得不手动告诉浏览器打开链接......

var theEvent = document.createEvent("MouseEvent");
theEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
var element = document.getElementById('link');
element.dispatchEvent(theEvent);

while (element)
{
    if (element.tagName == "A" && element.href != "")
    {
        if (element.target == "_blank") { window.open(element.href, element.target); }
        else { document.location = element.href; }
        element = null;
    }
    else
    {
        element = element.parentElement;
    }
}

Answer 3

使用 jQuery 您可以做完全相同的事情，例如：

$("a").click();

这将“单击”页面上的所有锚点。

Answer 4

element.click() 是 W3C DOM 规范。 Mozilla 的 Gecko/Firefox 遵循标准并且只允许在 INPUT 上调用此方法元素。

Answer 5

这是一个跨浏览器工作函数（也可用于除单击处理程序之外的其他情况）：

function eventFire(el, etype){
    if (el.fireEvent) {
      el.fireEvent('on' + etype);
    } else {
      var evObj = document.createEvent('Events');
      evObj.initEvent(etype, true, false);
      el.dispatchEvent(evObj);
    }
}

Answer 6

您是否尝试实际点击链接或触发 onclick？ 您可以通过以下方式触发 onclick：

var link = document.getElementById(linkId);
link.onclick.call(link);

Answer 7

我使用了上面列出的 KooiInc 功能，但我必须使用两种不同的输入类型，一种用于 IE 的“按钮”，另一种用于 FireFox 的“提交”。 我不太清楚为什么，但它有效。

// HTML

<input type="button" id="btnEmailHidden" style="display:none" />
<input type="submit" id="btnEmailHidden2" style="display:none" />

// in JavaScript

var hiddenBtn = document.getElementById("btnEmailHidden");

if (hiddenBtn.fireEvent) {
    hiddenBtn.fireEvent('onclick');
    hiddenBtn[eType]();
}
else {
    // dispatch for firefox + others
    var evObj = document.createEvent('MouseEvent');
    evObj.initEvent(eType, true, true);
    var hiddenBtn2 = document.getElementById("btnEmailHidden2");
    hiddenBtn2.dispatchEvent(evObj);
}

我已经搜索并尝试了很多建议，但这就是最终的工作。 如果我有更多时间，我会想调查一下为什么提交适用于 FF 和按钮适用于 IE，但现在这将是一种奢侈，所以下一个问题。