为什么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监听器的内容。这也是由第三方工具生成的。我希望点击触发器像现在一样执行这个 onclick，但只执行一次。

Answer 1

它调用了两次，因为按钮位于跨度内，并且跨度具有

onclick="alert('Boem')"

，因此当您触发单击按钮时，它会显示一个警报，并且相同的单击事件传播到跨度并再次显示警报。

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

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

演示

Answer 2

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

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

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

stopImmediatePropagation 将阻止任何父处理程序以及任何其他处理程序执行。请参阅此处了解更多详情。

Answer 3

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

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

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

请注意订单事件是在 DOM 中分配的。

演示

Answer 4

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

Answer 5

我在 Modal 上也面临这个问题

通过以下技巧解决 -

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

这里

off('click')

可以防止 save 方法多次触发。

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