logo标签列表

使用JavaScript/jQuery模拟单击'a'元素

javascriptjqueryhyperlinkclicksimulate
93

我正在尝试模拟对一个元素的点击。

相应的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();
但是没有反应。
1
你是从哪里执行 document.getElementById("gift-close").click(); 的？如果你从 onload 处理程序中执行它（或以其他方式确保 <a> 元素存在），它将起作用：http://jsfiddle.net/LKNYg/ - nnnnnn
2
如果你真的在使用jQuery，这是你首先学习的最基本的事情之一。请查看jQuery基础知识以了解更多信息。 - mekwall
我想让内联onclick处理程序执行。 - user2373137
请不要写href="javascript:void(0)"，这会导致严重的SEO问题。 - AmerllicA
请注意，用户点击和触发编程点击的工作方式不同。 - Sunil Kumar
8个回答
147

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

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

4
在Chrome、Firefox或Safari中，document.getElementById('gift-close').onClick();无法正常工作。但是，将onClick()更改为click()可以解决该问题。 - 425nesp
9
问者明确表示这不起作用，我不理解为什么会有赞同。 - user3714134
@HugoZink 因为它确实有效，你在点踩/评论之前有尝试过吗？ - André Dion
1
@AndréDion 我试过了，但在Firefox中似乎无法工作。可能是由于安全问题。 - user3714134
21

Using jQuery:

$('#gift-close').click();
3
为什么document.getElementById("gift-close").click();不起作用，而这个方法会起作用？ - nnnnnn
因为document.getElementById("gift-close")不是jQuery对象而是DOM对象。你也可以尝试这样做：$(document.getElementById("gift-close")).click(); - Alex Guerra
3
@techfoobar和Alex，DOM元素有一个.click()方法。http://jsfiddle.net/LKNYg/ - nnnnnn
@nnnnnn - 哇！对我来说完全是新信息.. 从未知道.. 谢谢 :-) - techfoobar
@roasted - 在Chrome中，它对我触发了内联的onclick事件：http://jsfiddle.net/LKNYg/2/ （但根据过去的经验，如果这是一个带有包含URL的“真正”的锚点的话，它不会导致实际的页面导航）。 - nnnnnn
显示剩余4条评论
17

尝试使用此处描述的 document.createEvent 方法：https://developer.mozilla.org/zh-CN/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);      
}
1
还要看看这个问题https://dev59.com/pmUo5IYBdhLWcg3wkADB，它描述了创建自定义事件的新方法。 - ihor marusyk
哇，太棒了！我刚刚尝试了你的解决方案来点赞你的答案，它真的有效 :) 如果有人想尝试吗？在控制台中执行以下代码....var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("click", 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); - Humayun
将"document.createEvent"更改为"new CustomEvent"以符合新标准。这是更好的解决方案，因为它真正模拟了点击，有时与简单地触发onClick事件不同。特别是如果元素正在执行两个操作，比如打开链接（在新窗口中？）和处理Click事件（在同一页上执行某些操作）。谢谢Ihor。 - Ellert van Koperen
10

下面是代码片段！

请看这些文档和示例，位于MDN上，你会找到答案。我认为这是正确的做法。

创建和触发事件

分发事件（示例）

从“Dispatch Event (example)” HTML链接中获取（模拟单击）：

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

This is how I would do it (2017 ..) :

Simply using 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>

9

您已尝试的代码：

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

只要元素在运行代码时实际存在于DOM中，这个方法就应该有效。确保元素存在的一些可能的方法包括：
  1. 从窗口的 onload 处理程序运行您的代码。http://jsfiddle.net/LKNYg/
  2. 如果您在使用jQuery，则从文档准备好处理程序中运行您的代码。http://jsfiddle.net/LKNYg/1/
  3. 将代码放入源html中元素之后的脚本块中。
因此：
$(document).ready(function() {
    document.getElementById("gift-close").click();
    // OR
    $("#gift-close")[0].click();
});
我想让内联onclick处理程序执行。 - user2373137
1
没错，在我提供的两个 jsfiddle 演示中都会出现这种情况。 - nnnnnn
我发现的技巧（与“最佳”答案相比）是使用[0]。这使脚本正常工作。 - user2986756
2
使用以下代码进行点击：
$("#gift-close").click();
1
当 document.getElementById("gift-close").click(); 没有效果时，为什么这个会奏效呢？ - nnnnnn
你必须从 onload 处理程序中运行你的 JavaScript 代码，或者使用 JQuery 的 $(document).ready(function(){//在此处编写代码})。 - Farid Imranov
-3

这里，试试这个：

$('#gift-close').on('click', function () {
    _gaq.push(['_trackEvent','voucher_new','cart',$(this).attr('rel')+'-mask_x_button-inaction']);
});
-3
尝试在 click() 方法内添加一个函数。
$('#gift-close').click(function(){
  //do something here
});

对我来说，将函数分配到click()方法内部而不是保持为空的方式有效。

这是一个点击事件监听器，而不是一个点击事件触发器。 - Tudor
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接