React组件中event.target输出不符合预期，如何始终获取li元素？

嘿，这个问题我之前开发时也碰到过！当<li>内部嵌套了<div>、<span>这类子元素，点击这些子元素时，event.target会指向触发事件的实际子元素，而非外层的<li>。结合你的场景，给你几个靠谱的解决办法：

1. 使用event.currentTarget替代event.target #

event.target是触发事件的实际元素，而event.currentTarget是绑定事件处理函数的元素——不管你点击的是元素本身还是它的子元素，currentTarget永远指向绑定事件的那个节点。

如果你的事件处理函数是直接绑定在<li>上的，这个方法最稳妥：

const handleLiClick = (event) => {
  // 这里永远拿到的是绑定了onClick的<li>元素
  const targetLi = event.currentTarget;
  console.log(targetLi);
};

// 组件渲染部分
<li onClick={handleLiClick}>
  <div>我是li内部的div</div>
  <p>我是li内部的段落</p>
</li>

2. 事件委托场景下用Element.closest() #

如果你的事件是委托在父容器（比如<ul>）上处理的，就可以用closest()方法从触发事件的元素向上查找最近的<li>：

const handleUlClick = (event) => {
  // 从点击的元素开始，向上匹配最近的<li>标签
  const targetLi = event.target.closest('li');
  // 加个判断，避免点击ul空白区域时报错
  if (targetLi) {
    console.log(targetLi);
    // 这里写你的业务逻辑
  }
};

// 父组件渲染部分
<ul onClick={handleUlClick}>
  <li>
    <div>点击这个div试试</div>
  </li>
  <li>
    <span>再点这个span</span>
  </li>
</ul>

closest()会返回匹配到的第一个祖先元素（包括自身），如果找不到就返回null，所以一定要加判断哦。

3. CSS穿透：pointer-events: none #

如果<li>内部的子元素只是纯展示、不需要自己处理点击事件，可以给子元素加CSS样式让点击事件穿透到<li>：

/* 让li下的所有子元素不接收点击事件 */
li > * {
  pointer-events: none;
}

这个方法简单粗暴，但要注意：如果子元素有自己的交互（比如按钮、输入框），就不能用这个方案，会导致子元素的交互失效。

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