React中如何实现父元素点击事件排除特定子元素触发？

针对你提出的需求——点击父div时，仅当点击区域不包含.div-4、.div-5这类特定子元素时才调用do_stuff()，有两种常用的实现方式，具体如下：

方法一：通过事件目标判断排除（推荐） #

利用事件对象的closest()方法，检查点击的目标元素是否属于需要排除的元素或其后代，若不属于则执行回调。这种方式无需给每个子元素单独绑定事件，尤其适合排除元素较多或存在嵌套子元素的场景。

注意：原代码中的classname是原生HTML写法，React中需改为className。

<div onClick={(e) => {
  // 检测点击目标是否是.div-4、.div-5或它们的子元素
  const excludedElement = e.target.closest('.div-4, .div-5');
  if (!excludedElement) {
    do_stuff();
  }
}}>
  <div className="div-1"></div>
  <div className="div-2"></div>
  <div className="div-3"></div>
  <div className="div-4"></div>
  <div className="div-5"></div>
</div>

方法二：给特定子元素阻止事件冒泡 #

直接给需要排除的子元素绑定点击事件，调用e.stopPropagation()阻止事件向上冒泡到父元素，这样点击这些子元素时，父元素的点击回调不会触发。这种方式逻辑直观，适合元素结构简单的场景。

<div onClick={() => do_stuff()}>
  <div className="div-1"></div>
  <div className="div-2"></div>
  <div className="div-3"></div>
  <div className="div-4" onClick={(e) => e.stopPropagation()}></div>
  <div className="div-5" onClick={(e) => e.stopPropagation()}></div>
</div>

两种方法的差异 #

• 方法一的closest()会穿透嵌套元素，哪怕点击.div-4内部的子元素，也会被检测到并排除，无需额外处理嵌套结构；
• 方法二如果遇到.div-4内部还有子元素的情况，点击子元素时事件仍会冒泡到父元素，此时需要给内部子元素也添加stopPropagation()，相比方法一繁琐一些。

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture