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可能需要處理下相容。