使用 javascript/jquery 模拟单击“a”元素答案

【问题标题】：Simulate a click on 'a' element using javascript/jquery使用 javascript/jquery 模拟单击“a”元素
【发布时间】：2013-07-08 06:52:49
【问题描述】：

我正在尝试模拟对元素的点击。相同的HTML如下

<a id="gift-close" href="javascript:void(0)" class="cart-mask-close p-abs" onclick="_gaq.push(['_trackEvent','voucher_new','cart',$(this).attr('rel')+'-mask_x_button-inaction']);" rel="coupon">&nbsp;</a>

如何模拟点击它。我试过了

document.getElementById("gift-close").click();

但它什么也没做

【问题讨论】：

你在哪里做document.getElementById("gift-close").click();？如果您从 onload 处理程序执行此操作（或以其他方式确保存在 <a> 元素），它将起作用：jsfiddle.net/LKNYg
如果你真的在使用 jQuery，这是你首先要学习的最基本的东西之一。请查看jQuery Fundamentals 了解更多信息。
我想让内联 onclick 处理程序执行
请不要写href="javascript:void(0)"。它有严重的 SEO 问题。
请注意，用户点击和触发程序点击的工作方式不同。 stackoverflow.com/questions/11127908/…

标签： javascript jquery hyperlink click simulate

【解决方案1】：

使用 jQuery：$('#gift-close').trigger('click');

使用 JavaScript：document.getElementById('gift-close').click();

【讨论】：

document.getElementById('gift-close').onClick(); 在 Chrome、Firefox 或 Safari 中不起作用。但是，将 onClick() 更改为 click() 确实有效。
提问者不是明确说这不起作用吗？我不明白赞成票。
@HugoZink 因为它确实有效..？您在否决/评论之前尝试过什么吗？
@AndréDion 我做了，但它似乎在 Firefox 中不起作用。可能是出于安全考虑。

【解决方案2】：

使用 jQuery：

$('#gift-close').click();

【讨论】：

为什么 document.getElementById("gift-close").click(); 没有这种方法？
因为 document.getElementById("gift-close") 不是 jQuery 对象而是 DOM 对象。你也可以试试这个： $(document.getElementById("gift-close")).click();
@techfoobar 和 Alex，DOM 元素有一个 .click() 方法。 jsfiddle.net/LKNYg
@nnnnnn - 哇！对我来说是全新的信息.. 从来不知道.. Tks :-)
哦，是的。你说得对。那么问题是他应该在页面加载后执行点击代码，即在onReady事件中；）

【解决方案3】：

尝试使用此处描述的document.createEvent https://developer.mozilla.org/en-US/docs/Web/API/document.createEvent

模拟点击的函数代码应该是这样的：

function simulateClick() {
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click", true, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);
  var a = document.getElementById("gift-close"); 
  a.dispatchEvent(evt);      
}

【讨论】：

也看看这个问题stackoverflow.com/questions/15951468/… 这描述了创建自定义事件的新方法。
哇太棒了！我刚刚尝试了您的解决方案来支持您的答案，它确实有效:) 如果有人想尝试？在控制台中执行此操作.... var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("点击", true, true, window,0, 0, 0, 0, 0, false, false, false, false, 0, null); var a = $('div#answer-17569610 a.vote-up-off').get(0); a.dispatchEvent(evt);
将“document.createEvent”更改为“new CustomEvent”以符合新标准。这是更好的解决方案，因为它真正模拟了点击，这有时与简单地触发 onClick 事件不同。特别是如果元素正在做两件事，比如打开链接（在新窗口中？）和处理 Click 事件（在同一页面上做某事）。谢谢伊霍尔。

【解决方案4】：

代码 sn-p 下面！

请在 MDN 上查看这些文档和示例，您会找到答案。这是我想说的正确方法。

Creating and triggering events

Dispatch Event (example)

取自'Dispatch Event (example)'-HTML-link（模拟点击）：

function simulateClick() {

  var evt = document.createEvent("MouseEvents");

  evt.initMouseEvent("click", true, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);

  var cb = document.getElementById("checkbox"); 
  var canceled = !cb.dispatchEvent(evt);

  if(canceled) {
    // A handler called preventDefault
    alert("canceled");
  } else {
    // None of the handlers called preventDefault
    alert("not canceled");
  }
}

我会这样做（2017 ..）：

只需使用MouseEvent。

function simulateClick() {

    var evt = new MouseEvent("click");

    var cb = document.getElementById("checkbox");
    var canceled = !cb.dispatchEvent(evt);

    if (canceled) {
        // A handler called preventDefault
        console.log("canceled");
    } else {
        // None of the handlers called preventDefault
        console.log("not canceled");
    }
}

document.getElementById("button").onclick = evt => {
    
    simulateClick()
}

function simulateClick() {

    var evt = new MouseEvent("click");

    var cb = document.getElementById("checkbox");
    var canceled = !cb.dispatchEvent(evt);

    if (canceled) {
        // A handler called preventDefault
        console.log("canceled");
    } else {
        // None of the handlers called preventDefault
        console.log("not canceled");
    }
}

<input type="checkbox" id="checkbox">
<br>
<br>
<button id="button">Check it out, or not</button>

【讨论】：

【解决方案5】：

你已经尝试过的代码：

document.getElementById("gift-close").click();

...只要元素在您运行时实际存在于 DOM 中，它就应该起作用。确保这一点的一些可能方法包括：

从窗口的onload 处理程序运行您的代码。 http://jsfiddle.net/LKNYg/
如果您使用的是 jQuery，请从文档就绪处理程序运行您的代码。 http://jsfiddle.net/LKNYg/1/
将代码放在源 html 中的元素之后的脚本块中。

所以：

$(document).ready(function() {
    document.getElementById("gift-close").click();
    // OR
    $("#gift-close")[0].click();
});

【讨论】：

我想让内联 onclick 处理程序执行
对。这发生在我提供的两个 jsfiddle 演示中。
我发现的技巧（与“最佳”答案相比）是使用 [0]。这导致脚本工作。

【解决方案6】：

使用此代码点击：

$("#gift-close").click();

【讨论】：

为什么 document.getElementById("gift-close").click(); 没有这种方法？
你必须从 onload 处理程序运行你的代码，或者 $(document).ready(function(){//write code here}) 处理 JQuery

【解决方案7】：

尝试在click() 方法中添加一个函数。

$('#gift-close').click(function(){
  //do something here
});

它在 click() 方法中分配一个函数对我有用，而不是保持为空。

【讨论】：

【解决方案8】：

来，试试这个：

$('#gift-close').on('click', function () {
    _gaq.push(['_trackEvent','voucher_new','cart',$(this).attr('rel')+'-mask_x_button-inaction']);
});

【讨论】：