如何检查事件目标是否包含在元素中？答案

【问题标题】：How to check if event target is contained within an element?如何检查事件目标是否包含在元素中？
【发布时间】：2021-08-23 15:33:45
【问题描述】：

我正在尝试应用事件委托，因此我想在 li 元素内单击时更新文本，但是当我在元素内单击时，它不会触发。我不想将事件侦听器直接附加到 li，因为列表可以更新，并且 li 中可以有任何元素类型。

const menu = document.querySelector('.menu');
const textField = document.querySelector('p');

menu.addEventListener('click', e => {
  if (e.target.matches('li')) {
    textField.textContent = e.target.textContent;
  }
});

li {
  padding: 1em;
  border: 1px solid red;
}

a {
  border: 1px solid blue;
}

<div class="menu">
  <ul>
    <li><a>Home</a></li>
    <li><a>Gallery</a></li>
    <li><a>About us</a></li>
  </ul>

  <p></p>
</div>

【问题讨论】：

标签： javascript dom-events event-delegation

【解决方案1】：

如果您想要 li 而不是锚点或任何其他子元素，请使用 closest

const li = e.target.closest("li");
if (li) { /* do whatever */ }

【讨论】：

正是我想要的。就我而言，我只是使用 while 循环遍历了 DOM。但是使用 javascript 已有的更好。谢谢！

【解决方案2】：

您可以通过将click 事件侦听器附加到父列表ul 来利用冒泡效果。

const menu = document.querySelector('.menu');
const ul = menu.querySelector('ul');
const textField = document.querySelector('p');

ul.addEventListener('click', e => {
  if(e.target != ul) textField.textContent = e.target.textContent;
});

li {
  padding: 1em;
  border: 1px solid red;
}

a {
  border: 1px solid blue;
}

<div class="menu">
  <ul>
    <li><a>Home</a></li>
    <li><a>Gallery</a></li>
    <li><a>About us</a></li>
  </ul>

  <p></p>
</div>

【讨论】：

如果ul 或div 有填充，这可能会导致问题。