Question

我有以下html：

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

当我拨打以下javascript时：

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

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

我无法控制范围，它是在第三方工具中生成的。我确实可以控制按钮和他的参数。

您可以在此处找到JSFiddle示例： http://jsfiddle.net/Voga/v4100zke/

更新

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

Answer 1

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

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

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

<强> Demo

Answer 2

停止使用事件传播： stopPropagation

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

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

DEMO

Answer 3

鼓泡。孩子的click事件也发生在父（span）上。

Answer 4

This thread将有助于回答“为什么＆＃39;它的。

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

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

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

希望有所帮助。

Answer 5

此处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 6

这也应该有效：

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

Answer 7

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

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

Answer 8

请注意，您使用了jQuery的点击方法，它会同时发出 dom的鼠标点击事件和 jquery的点击事件 。然后， jquery的点击事件和 dom的鼠标点击事件都会传播到span元素，并且其onclick侦听器会被触发两次，因此它会发出两次警告< / p>

检查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 9

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

通过以下技巧解决了-

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

这里off('click')可以防止save方法多次触发。

Answer 10

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

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

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

stopImmediatePropagation 将阻止任何父处理程序以及任何其他处理程序执行。有关更多详细信息，请参见here。

Answer 11

我已经尝试了上述所有建议，但不幸的是，上述建议都不适合我。在我的情况下，“myBtn”是单独的 div，所以使用 flag 和 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);
        }

})

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

更新

11 个答案: