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

Question

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

40

我有以下的HTML内容：

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

当我调用以下 JavaScript 代码时：

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

点击事件被触发了两次，而我期望它只触发一次。因为jQuery应该在DOM树中查找并找到只有一个onclick。

我无法控制这个span，它是由第三方工具生成的。但是我可以控制按钮及其参数。

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

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

- Dommicentl

1

请使用以下代码：<span> <button id="test1" onclick="alert('Boem')">测试</button> </span> - cracker

https://dev59.com/4W445IYBdhLWcg3w9Oss - turtle

1

至少如果您无法控制该span，您可以执行$('#test1).parent().trigger('click')。 - Hemadeus

1

可能是为什么label元素的onclick事件会触发两次的重复问题。 - Martijn

13个回答

35

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

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

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

stopImmediatePropagation将阻止任何父处理程序和其他处理程序执行。有关详细信息，请参见此处。

- viveknaskar

1

在我的情况下，这个方法奏效了。谢谢！ - OnTheFly

1

完美的，谢谢！ - AShah

1

这个答案完全符合被接受的标准！ - Shashikumar Misal

12

要停止事件传播，使用：stopPropagation

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

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

请注意DOM中分配事件的顺序。

演示

- A.T.

5

冒泡。子元素（span）上的单击事件也会在父元素上发生。

- Jacob

5

为什么它会触发两次？我知道按钮上的触发器也会触发其父元素，因此在这种情况下是span，但它是唯一具有onclick事件的元素。所以我期望这个onclick只会触发一次？ - Dommicentl

1

我也遇到了模态窗口的问题

通过以下技巧解决 -

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

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

- Sanaulla

0

请注意您已经使用了jQuery的click方法。它将触发DOM的鼠标点击事件和jQuery的点击事件。然后，jQuery的点击事件和DOM的鼠标点击事件都会传播到元素，并且它的onclick监听器会被触发两次，因此会弹出两次警报。

查看这个演示以弄清楚。

至于如何处理它，只需像之前的答案中所示使用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()})

});

- shawn peng

0

我尝试了上面提供的所有建议，但不幸的是，以上任何一种方法都对我无效。

"myBtn"在我的情况下是单独的div，因此使用标志和setTimeout，我已经实现了我想要的结果。请给予建议。

我尝试过：

.off()
.unbind()
e.stopImmediatePropagation()
e.preventDefault();

以下是对我有效的工作代码，我知道这不是一个好的做法，但现在我没有任何解决方案。请给予建议。

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

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

})

- nano dev

0