事件发射两次

Question

您好我将onclick事件绑定到父级和子级（同一方法）。事件被解雇两次如何避免这种情况？

<div id="sparentId" onclick="javascript:somemethod()" >
  <button id="childId" onclick="javascript:somemethod()"></button>
</div>

点击Div，事件被解雇了两次。

Answer 1

onclick事件显示两次的原因是因为在JavaScript中有一些叫做事件冒泡的东西。

看看以下内容：

此图片显示，如果点击<img>，则该事件会“冒泡”到<p>标记，然后到<div>，然后到文档的其余部分。如果<p>标记上有onclick事件，即使<p>标记未被点击（但<img>已被点击），该事件也必然会“冒泡” DOM，在<p>标记上触发事件时仍然会继续（换句话说，如果您在onclick上也有<div>个事件，那么它也会触发

所以你应该做的是：

<div id="sparentId" onclick="javascript:somemethod()" >
  <button id="childId"></button>
</div>

换句话说，正如我上面所解释的那样，您不再需要按钮中的额外onclick事件处理程序，因为当您单击按钮时，事件会冒泡到父div，这将触发该事件。 / p>

如果您想使用原始HTML代码，那也没关系 - 只需添加：

function somemethod(evt) { // the method you run
  // some code
  evt.stopPropagation(); // stops bubbling
}

这有效地阻止了事件冒泡你的DOM树。

Answer 2

尝试：

<button id="childId" onclick="javascript:somemethod(event)"></button>

JS代码

function somemethod(event){
  event.stopPropagation();
}

Answer 3

它被调用两次，因为你调用它两次，即在div点击一次，在按钮点击一次。按钮已经在div内。

<div id="sparentId" onclick="javascript:somemethod()" >
   <button id="childId" onclick="javascript:somemethod()"></button>
</div>

试

 <div id="sparentId">
    <button id="childId" onclick="javascript:somemethod()">Click Me</button>
 </div>

Answer 4

use 

event.stopImmediatePropagation()