关于javascript：为什么onClick事件被触发两次？

Why is the onClick event triggered twice?

我有以下HTML：

1
2
3

当我调用以下javascript时：

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

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

我不控制跨度，它是在第三方工具中生成的。我可以控制按钮和他的参数。

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

更新

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

相关讨论

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

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

1
2
3

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

演示

相关讨论

要停止事件传播，请使用：stop propagation

1
2
3
4

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

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

演示

起泡。子级上的单击事件也发生在父级上(span)。

相关讨论

我也遇到了一个类似的问题，我不得不下载一个PDF文件，它被下载了两次。我使用了jquery的stopImmediatePropagation方法。

1
2
3
4
5

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

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

StopImmediatePropagation将阻止任何父处理程序以及任何其他处理程序执行。有关详细信息，请参阅此处。

我在莫代尔也面临这个问题

通过以下技巧解决-

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

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

注意，您已经使用了jquery的click方法，它将同时发出dom的mouse click事件和jquery的click事件。然后jquery的click事件和dom的mouse click事件都被传播到span元素，它的onclick侦听器被触发两次，因此它会发出两次警报。

检查这个演示去弄清楚

关于如何处理它，只需使用stoppropagation作为上面的答案。

1
2
3
4
5
6

$('#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()})

});

我也有同样的问题。我的事实是，我使用的是.trigger('.element')，在element类中有两个元素。

因此，我得到了更具体的描述，并使用.trigger('.parent .element')来确保在一个元素上只发生一次单击事件，而不是在两个元素上发生一次单击事件。

这也应该有效：

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

相关讨论

这里是button click is triggered。由于button在span中，而onclick事件是为span定义的，因此发生了two alert。

1	One is by the button

和

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

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

1
2
3

相关讨论

这个线索将有助于回答"为什么"。

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

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

1
2
3

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

希望有帮助。