javascript - 仅在父点击而非子点击时触发事件

Question

以下面的代码为例:

<div id="parent">
  <div id="child">info goes here</div>
</div>

//javascript
function something{
//do something;}
//initial attempt
document.getElementById('parent').addEventListener('click',something);
//event capture
document.getElementById('parent').addEventListener('click',something,true);

当我点击父元素时，我希望它做一些事情，而当我点击子元素时，我希望它什么都不做。问题是，当我点击子元素时，它触发了“某事”。 我认为这可能是事件冒泡，这样如果我点击子元素，事件就会从那里冒泡到父元素。所以后来我想到了事件捕获，但是这也导致了这个问题。

任何有关如何实现此目的的意见或建议将不胜感激。

Answer 1

相反，检查 发起事件的元素 Event.target - 确实是所需的元素。
PS:不要与 Event.currentTarget 混淆(相反)它始终是附加了事件处理程序的元素。

function something (evt){
  if (evt.target !== this) return; // Do nothing
  // else...
  console.log(`#${this.id} clicked`);
}

const el_parent = document.getElementById('parent');
el_parent.addEventListener('click', something);

// Example why you should not use `Event.stopPropagation()`...
document.body.addEventListener('click', () => console.log("BODY is notified!"));

<div id="parent">
  PARENT ELEMENT
  <div id="child">CHILD ELEMENT</div>
</div>

不要使用Event.stopPropagation()

Event.stopPropagation() 会是一个想法，但不是一个好主意，因为我们应该避免应用程序(在某个层)阻止事件冒泡 -并最终通知其他元素发生了此类事件。想象一下，您的 body 监听点击事件以关闭自定义选择下拉菜单...如果您的应用程序周围有元素，并且使用 Event.stopPropagation() - 点击此类元素打开的下拉列表不会关闭 - 导致损坏的 UI。这只是一个简单的例子。