如何在JavaScript中以编程方式点击元素？

Question

在IE中，我可以从JavaScript中调用element.click() - 我应该如何在Firefox中完成同样的任务？理想情况下，我希望有一些JavaScript代码可以跨浏览器平台通用，但如果必要的话，我也可以为每个浏览器编写不同的JavaScript代码。

- Bruce

---

这个问题也在这里得到了回答：https://dev59.com/YHNA5IYBdhLWcg3wk-6A。 - user488071

Answer 1

document.createEvent文档中说：“createEvent方法已过时，应使用事件构造函数代替。”

因此，您应该改用这种方法：

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

并在元素上触发它，就像这样：

element.dispatchEvent(clickEvent);

如此处所示。

- Iulian Onofrei

---

Chrome的绝佳解决方案。获取元素并执行dispatchEvent(clickEvent);的代码是：var element = document.getElementById("id-tag"); - kbpontius

每次都有效，而element.click()并不总是有效的，尤其是在移动设备上不可靠。 - Christian

不能用于动态添加的元素。 - Cybernetic

点击()方法怎么样？有什么缺点吗？ - rlatief

点击 click() 怎么样？有什么不足之处吗？ - undefined

是的，就是这个：https://dev59.com/fXRA5IYBdhLWcg3w1BmW#22469115?noredirect=1#comment618935_809108。 - Iulian Onofrei

Answer 2

对于火狐浏览器来说，链接似乎是"特殊的"。我能够使其正常工作的唯一方法是使用createEvent，在MDN上描述的并调用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;
    }
}

- will

---

它与window.open（element.href，element.target）有何不同 - 在我的Firefox上，它的工作方式完全相同，并显示丑陋的黄色栏。 - iirekm

如果您将MouseEvent的倒数第三个参数设置为true（表示在单击时按下了metaKey（CMD）按钮），那么这不会在后台标签中打开选项卡，对吗？还是会呢？ - Magne

Answer 3

使用jQuery，你可以做同样的事情，例如：

$("a").click();

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

- Jake McGraw

---

请注意，此工作适用于 href 使用 onclick 的情况，例如 <a onclick="someFunction()">点击我</a>，但不适用于使用以下格式的情况 <a href="javascript:someFunction()">点击我</a>。 - Jacob Mouka

Answer 4

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

- Bjorn

---

明白了，但当我想要编程模拟对非INPUT元素的点击时并不太有帮助。 - Bruce

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);
    }
}

- KooiInc

---

我发现需要在第3行使用el [etype]();来使IE触发本地事件（我正在测试点击处理程序-请参见http://jsfiddle.net/Pc8qE/）。 - Lessan Vaezi

为了让它正常工作，我不得不在Firefox中使用类型为“submit”的输入，而在IE中使用类型为“button”的输入。 - user220583

Answer 6

您是想要实际跟随链接还是触发onclick？您可以使用以下代码触发onclick：

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

- jiggy

---

有趣，我会尝试一下。这是测试工具的一部分，因此我们事先不知道要单击哪个特定元素 - 它取决于测试用例的指定。 - Bruce

不需要指定上下文，因为onclick是“link”的属性，上下文已经适当设置。 - James

这在Chrome中不起作用。控制台抛出了一个错误，说方法“call”不存在。 - kbpontius

你一定打错了。call()是Function原型的一部分。它肯定存在。 - jiggy

Answer 7

我使用了KooiInc上述的函数，但是我不得不使用两种不同的输入类型，一个是按钮（button）适用于IE浏览器，另一个是提交（submit）适用于FireFox浏览器。我不太确定为什么，但它能正常工作。

// HTML

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

// 在 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);
}

我已经搜索并尝试了许多建议，但最终这是有效的。如果我有更多时间，我会喜欢调查为什么在Firefox中使用submit可以工作，在IE中使用button可以工作，但现在这将是一种奢侈，所以进入下一个问题。

- krm