javascript - Wenn das übergeordnete Element an einen Klick gebunden ist, wie kann das untergeordnete Element verhindern, dass der Klick des übergeordneten Elements ausgelöst wird, ohne dass der Klick gebunden wird?

Question

HTML:

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

  </p>
</p>

JS:

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

Wenn ich auf das untergeordnete Element klicke, verschwindet es. Wie kann man diese Situation vermeiden? Ich möchte Klickereignisse nicht auch an untergeordnete Elemente binden.

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/

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

Answer 3

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