使用javascript / jquery模拟对“ a”元素的点击


72

我正在尝试模拟对元素的单击。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>元素存在),它将起作用
nnnnnn

2
如果您真的在使用jQuery,这是您首先要学习的最基本的知识之一。请查看jQuery基础知识以了解更多信息。
mekwall

我想执行嵌入式onclick处理程序
user2373137 2013年

请,请不要写href="javascript:void(0)"。它具有严重的SEO问题。
AmerllicA

请注意,用户点击和触发的编程点击的工作方式不同。stackoverflow.com/questions/11127908/...
苏尼尔·库马尔

Answers:


112

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

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


4
document.getElementById('gift-close').onClick();在Chrome,Firefox或Safari中不起作用。但是,更改onClick()click()确实可行。
425nesp

6
没有提问者明确地说,这工作?我不理解投票结果。
Hugo Zink

@HugoZink,因为它确实起作用..?在拒绝投票/发表评论之前,您尝试过什么吗?
安德烈翁

1
@AndréDion我做到了,它似乎在Firefox中不起作用。可能是出于安全考虑。
Hugo Zink

19

使用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()方法。jsfiddle.net/LKNYg
nnnnnn

@nnnnnn-哇!对我来说是个全新的信息。.从来不知道.. Tks :-)
techfoobar

哦是的 你是对的。然后的问题是,他应该在页面加载后即在onReady事件中执行点击代码;)
Alex Guerra

15

尝试使用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
还要看一下这个问题stackoverflow.com/questions/15951468/…这描述了创建自定义事件的新方法。
ihor marusyk 2013年

哇!我刚刚尝试了您的解决方案以支持您的回答,但它确实有效:)是否有人想尝试?在控制台中执行此操作。...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

9

下面的代码段!

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

创建和触发事件

调度事件(示例)

取自“调度事件(示例)”-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");
  }
}

这就是我要做的(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>


8

您已经尝试过的代码:

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 2013年

1
对。这在我提供的两个jsfiddle演示中都发生了。
nnnnnn

我发现的技巧(与“最佳”答案相比)是使用[0]。这导致脚本起作用。
user2986756 '20


0

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

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

它对我有用,它在click()方法内分配了一个函数,而不是将其保留为空。


-3

在这里,尝试这个:

$('#gift-close').on('click', function () {
    _gaq.push(['_trackEvent','voucher_new','cart',$(this).attr('rel')+'-mask_x_button-inaction']);
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.