如何判断事件目标是否包含在指定元素内？解决事件委托触发问题

你现有代码的逻辑只能在直接点击li元素本身的时候触发，如果你点击的是li内部的子元素（比如a标签、span这类），e.target指向的是实际被点击的子元素，无法匹配li选择器，所以逻辑不会执行。同时你需要额外加判断排除点击a标签的场景。

修改后的JavaScript代码 #

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

menu.addEventListener('click', e => {
  // 查找当前点击元素最近的li祖先节点
  const targetLi = e.target.closest('li');
  // 检查是否点击的是a标签或a标签内部元素
  const targetA = e.target.closest('a');
  // 仅满足在li内且未点击a标签时执行逻辑
  if (targetLi && !targetA) {
    textField.textContent = targetLi.textContent;
  }
});

逻辑说明 #

• Element.closest() 方法会从当前点击元素开始向上遍历祖先节点，匹配到第一个符合选择器的元素就返回，找不到则返回null，天然适配动态生成的li结构，不需要给每个li单独绑定事件，符合你事件委托的使用需求。
• 额外添加a标签的判断，只要点击位置在a标签范围内就直接中断逻辑，满足你点击a标签不触发更新的要求。

配套原有CSS代码 #

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

a {
  border: 1px solid blue;
}

配套原有HTML代码 #

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

  <p></p>
</div>

内容的提问来源于stack exchange，提问作者noob_coder