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

Posted 2023-02-22

【中文标题】如何以编程方式单击 JavaScript 中的元素？

【英文标题】：How do I programmatically click on an element in JavaScript?

【发布时间】：2010-10-22 23:36:39

【问题描述】：

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

【问题讨论】：

这个问题也得到了回答here。

【参考方案1】：

document.createEvent documentation 表示“createEvent 方法已弃用。请改用event constructors。”

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

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

然后在这样的元素上触发它：

element.dispatchEvent(clickEvent);

如图here。

【讨论】：

Chrome 的优秀解决方案。获取然后为我执行dispatchEvent(clickEvent); 的元素的代码是：var element = document.getElementById("id-tag");

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

【参考方案2】：

对于 Firefox 链接似乎是“特殊的”。我能够让这个工作的唯一方法是使用 createEvent described here on 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;
    

【讨论】：

它与 window.open(element.href, element.target) 有何不同 - 在我的 Firefox 中它的工作原理完全相同，并显示丑陋的黄色条

如果将 MouseEvent 的倒数第三个参数设置为 true（意味着单击时元键 (CMD) 按钮被按住），这不会在后台选项卡中打开选项卡，对吗？还是会？

【参考方案3】：

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

$("a").click();

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

【讨论】：

请注意，当 href 使用 onclick 时，此方法有效，例如 <a onclick="someFunction()>Click me</a>，但在使用此格式时无效 <a href="javascript:someFunction()">Click me</a>

【参考方案4】：

element.click() 是W3C DOM specification 概述的标准方法。 Mozilla 的 Gecko/Firefox follows the standard 并且只允许在 INPUT 元素上调用此方法。

【讨论】：

了解，但在我想以编程方式模拟对非 INPUT 元素的点击时没有帮助。

【参考方案5】：

您是在尝试实际跟踪链接还是触发 onclick？您可以通过以下方式触发 onclick：

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

【讨论】：

很有趣，我会试一试。这是测试工具的一部分，所以我们不提前知道我们将要点击哪个特定元素 - 它是测试用例指定的任何内容。

你不需要指定上下文；因为 onclick 是 'link' 的一个属性，所以上下文已经被适当地设置了。

这在 Chrome 中不起作用。控制台中出现错误，提示“调用”方法不存在。

你一定是打错了。 call() 是Function prototype 的一部分。它肯定在那里。

【参考方案6】：

这是一个跨浏览器的工作函数（也可用于除点击处理程序以外）：

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

【讨论】：

我发现我需要在第 3 行使用 el[etype](); 来让 IE 触发本机事件（我正在使用点击处理程序进行测试 - 请参阅 jsfiddle.net/Pc8qE）

为了让它工作，我不得不为 firefox 使用 submit 类型的输入，为 IE 使用 button 类型的输入。

【参考方案7】：

我使用了上面列出的 KooiInc 的功能，但我必须使用两种不同的输入类型，一种用于 IE 的“按钮”，一种用于 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);

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