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

Question

HTML：

<div id="container">
  <div id="inner">

  </div>
</div>

JS：

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

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

Answer 1

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

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

Answer 2

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 3

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

Answer 4

e.stopPropagation();

Answer 5

二楼正解！！