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.stopPropagation停止事件冒泡：

function something() {
  console.log("something");
}
document.getElementById('parent').addEventListener('click', something);
document.getElementById('child').addEventListener('click', e => e.stopPropagation());

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

Answer 2

这是事件冒泡。仅仅因为您正在处理document.getElementById('child').addEventListener('click',(e) => { e.stopPropagation(); something() },true);上的click事件，并不意味着它就不会冒犯到父对象。

有两种方法。第一个是阻止事件传播，如下所示： something

第二种方法是检查事件目标，并且仅在引起click事件的最深层元素是子元素时运行document.getElementById('child').addEventListener('click',(e) => { e.target.id == "child" ? something() : nothing() },true);：

data.Where(x => x...).OrderBy()...

Answer 3

相反，请检查发起事件（evt.target）的元素是否确实是所需元素

https://developer.mozilla.org/en-US/docs/Web/API/Event/target

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()-单击此类元素，则打开的下拉列表将不会关闭-导致损坏的用户界面。这只是一个简单的例子。

仅在父级单击而非子级上触发事件

3 个答案: