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

Question

我正在尝试应用事件委托，所以我想在 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>

Answer 1

您可以通过将 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>

Answer 2

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

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

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

How to check if event target is contained within an element?

javascript

event-delegation

dom-events