为什么onClick事件会触发两次？

Question

我有以下html：

<span onclick="alert('Boem')">
    <button id="test1">test</button>
</span>

当我调用以下javascript时：

$('#test1').trigger('click');

onclick 事件被触发两次，而我希望它只触发一次。因为 JQuery 应该在 DOM 树中查找并且只找到一个 onclick。

我无法控制跨度，它是在第三方工具中生成的。我确实可以控制按钮及其参数。

您可以在这里找到一个 JSFiddle 示例： http://jsfiddle.net/Voga/v4100zke/

更新

我不知道 span 的 onclick 监听器的内容。这也是由 3rd 方工具生成的。我希望点击触发器像现在一样执行这个 onclick，但只执行一次。

Answer 1

它调用了两次，因为按钮在跨度内并且跨度具有onclick="alert('Boem')"，因此当您触发单击按钮时，它会显示警报，并且相同的点击事件传播到跨度并再次显示警报。

您需要使用以下代码停止按钮的默认行为：

$(function(){
$('#test1').click(function(e){e.preventDefault();}).click();
});

Demo

Answer 2

我也遇到了类似的问题，我必须下载一个下载两次的 pdf。我使用了 jQuery 的 stopImmediatePropagation 方法。

$( "#test1" ).on("click", function(e) {
     e.stopImmediatePropagation();
});

$('#test1').trigger('click');

stopImmediatePropagation 将阻止任何父处理程序以及任何其他处理程序执行。详情请参考here。

Answer 3

停止事件传播使用：stopPropagation

$( "#test1" ).on( "click", function(ev) {
    ev.stopPropagation();
});
$('#test1').trigger('click');

请注意，在 DOM 中按顺序分配事件。

DEMO

Answer 4

冒泡。子节点的点击事件也发生在父节点（跨度）上。

Answer 5

This thread 将帮助回答“为什么”。

更好的方法是只为元素分配一个点击处理程序，以使您的 Javascript 从 HTML 中抽象出来：

http://jsfiddle.net/v4100zke/3/

$('#test1').click(function() {
    alert('Boem')
});

希望对您有所帮助。

Answer 6

这也应该有效：

$($('#test1').parent()).trigger('click');

Answer 7

这里button click is triggered。由于button 在span 内部，并且onclick 事件是为span 定义的，所以two alert 发生了。

One is by the button 

和

other by its parent(父级有onclick事件并触发按钮点击)。

要避免两次警报，请使用此

<span>
    <button onclick="alert('Boem')" id="test1">test</button>
</span>

Answer 8

我遇到了同样的问题。我的事实是我使用了.trigger('.element')，并且element 类有两个元素。

所以，我变得更具体，并使用.trigger('.parent .element') 来确保单个元素上只发生一次点击事件，而不是两个元素上发生一次点击事件。

Answer 9

注意你使用了jQuery的click方法，它会同时发出dom的鼠标点击事件和jquery的点击事件。然后 jquery 的点击事件 和 dom 的鼠标点击事件 都被传播到 span 元素，并且它的 onclick 监听器被触发两次，因此它两次警报

检查这个demo 想办法解决

至于如何处理，就用stopPropagation作为上面的答案

$('#test1').click(function() {

  // comment this line and run, 'parent' will be alerted TWICE!!! since both mouseEvent and jQuery.Event trigger the onclick listener
  $('#children').click(function(e) {e.stopPropagation()})

});

Answer 10

我在 Modal 上也遇到过这个问题

通过以下技巧解决 -

$('#saveButton').off('click').on('click', { modal: modal }, save)

这里off('click') 防止保存方法多次触发。

Answer 11

我已经尝试了上述所有建议，但不幸的是，上述所有建议都不适合我。 在我的情况下，“myBtn”是单独的 div，所以使用 flag 和 setTimeout 我已经达到了我想要的结果。请指教。

我试过了：

1. .off()
2. .unbind()
3. e.stopImmediatePropagation()
4. e.preventDefault();

下面是我的工作代码，我知道这不是一个好习惯，但现在我没有任何解决方案。请指教

var isClicked = false;
$("#myBtn").on("click",function(e){
    
    
        if(!isClicked){
            isClicked = true;
            console.log("button clicked");
            

            setTimeout(function(){
                isClicked = false;
            },3000);
        }

})