javascript - 点击 child 不会触发 parent 点击

Question

当点击content 时，我想触发我的alert。我的 content 中可以有任意数量的子元素，所以我不想对每个元素都进行硬编码。我想也许我可以监听对该父元素的点击，然后每次点击子元素都会触发我的操作。但它不起作用。

var wrapper = document.getElementById('wrapper');
var content = document.getElementById('content');

wrapper.addEventListener("click",function(e) {
  if (e.target === content  ) {
	alert('clicked!');
} 
});

<div id="wrapper">
  <div id="content">
    <span>HELLO!</span>
  </div>
</div>

Answer 1

使用parentNode遍历DOM:

var wrapper = document.getElementById('wrapper');    
var content = document.getElementById('content');

wrapper.addEventListener("click",function(e) {
  var target = e.target;
  while(target.parentNode && target!==content) {target=target.parentNode;}

  if (target === content) {
    alert('clicked!');
  } 
});

<div id="wrapper">
  <div id="content">
    <span>HELLO!</span>
  </div>
</div>

---

注意:只有在#wrapper 中有其他东西可以点击时，这才有意义。否则，您可以只将点击事件附加到 #content 而无需检查目标，因为该事件无论如何都会冒泡。