javascript - Javascript - 将事件侦听器添加到实时标签，但从事件侦听器中排除内部元素

Question

标签： javascript

Answer 1

event.target返回树中最深的元素。由于<i>在内部<a>，它作为当前目标返回。要解决此问题，您可以使用它Element.closest()来获取正确的元素。

document.body.addEventListener("click", (event) => {
	const aEl = event.target.closest("a");
  if (aEl) {
  	aEl.classList.toggle("active")
  }
})

a {
  color: brown;
}

.active {
  color: mediumseagreen;
}

<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>
<ul>
    <li><a><i class="fa fa-check" aria-hidden="true"></i></a> One</li>
    <li><a><i class="fa fa-check" aria-hidden="true"></i></a> Two</li>
</ul>