javascript - 父元素绑定click，子元素在不绑定click的情况下如何避免触发父元素click？

Question

HTML：

<p id="container">
  <p id="inner">

  </p>
</p>

JS：

document.getElementById('container').addEventListener('click',function () {
  document.getElementById('inner').style.display = "none";
});

这时我点击子元素，也会消失。该如何避免这种情况呢？我不想也让子元素绑定click事件的方法。

Answer 1

document.getElementById('container').addEventListener('click',function (e) {
  document.getElementById('inner').style.display = "none";
  e.stopPropagation();
}, true);

1. 为 addEventListener 传递第三个参数 true。使用事件捕获。

   • https://developer.mozilla.org...

2. e.stopPropagation() 阻止事件传播。

   • https://developer.mozilla.org...

Answer 2

https://jsfiddle.net/g5u7qrrd/6/

雷雷

Answer 3

给子元素style加个pointer-events: none;直接忽略鼠标事件。IE可能需要处理下兼容。