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

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/

更新

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

Answer 1

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

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

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

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

Answer 2

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

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

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

演示

Answer 3

停止事件传播的使用:stopPropagation

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

请注意,按顺序在DOM中分配事件.

DEMO

Answer 4

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