阻止JavaScript事件冒泡到父元素

前言

略

问题

有代码如下：

<div class='preview_image_container'>
  <!--图片-->
  <div onclick='details(this)'>
    <img  class='preview_image' src='xx.png' />
    <div class='preview_name' >xxx</div>
  </div>
  <!--删除按钮-->
  <img class='preview_delete' src='/img/icon-delete.png' onclick='delete(this)'>
</div>

此时产生一个问题：当点击删除按钮时，同时触发details(this)函数和delete(this)函数。
要解决此问题需要使用 stopPropagation。

解决办法

在delete(this)函数中调用event.stopPropagation()阻止事件冒泡到父元素（这样就阻止details(this)函数的执行）。

修改delete函数为：

function delete(e) {
  event.stopPropagation();
  /*需要执行的代码*/
  ...
}

stopPropagation

event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。