如何正确处理onClick事件？限制事件仅触发于容器元素

首先，先说说常规处理onClick的最佳实践：尽量避免使用内联箭头函数（像你代码里写的onClick={() => { /* do something */ }}），因为每次组件渲染时都会创建一个新的函数实例，虽然大多数时候性能影响可以忽略，但养成传递函数引用的习惯会更优，比如：

// 定义事件处理函数
const handleContainerClick = () => {
  // 这里写你的业务逻辑
  console.log("容器被点击了");
};

// 在JSX中传递函数引用
<div className='container' onClick={handleContainerClick}>
  <div className='element'></div>
  <div className='element'></div>
  <div className='element'></div>
</div>

接下来解决你遇到的核心问题：点击子元素时父容器的onClick也被触发。这是DOM事件的冒泡机制导致的——事件会从触发它的子元素向上传播到所有父元素。要限制事件仅在容器本身被点击时触发，有两种常用方案：

方案1：判断点击目标是否为容器本身 #

在事件处理函数中，通过event.target和event.currentTarget的对比来判断。target是实际被点击的元素，currentTarget是绑定了事件的元素（也就是你的container）。只有当两者相等时，才执行逻辑：

const handleContainerClick = (e) => {
  // 仅当点击的是容器本身时执行逻辑
  if (e.target === e.currentTarget) {
    // do something
    console.log("只有容器被点击时才会执行这里的代码");
  }
};

<div className='container' onClick={handleContainerClick}>
  <div className='element'></div>
  <div className='element'></div>
  <div className='element'></div>
</div>

这种方法的好处是不需要修改子元素的代码，适合子元素数量多或者子元素不需要独立点击逻辑的场景。

方案2：阻止子元素的事件冒泡 #

给每个子元素添加onClick事件，调用e.stopPropagation()来阻止事件向上传播到父容器：

const handleContainerClick = () => {
  console.log("容器被点击了");
};

const handleElementClick = (e) => {
  // 阻止事件冒泡到父元素
  e.stopPropagation();
};

<div className='container' onClick={handleContainerClick}>
  <div className='element' onClick={handleElementClick}></div>
  <div className='element' onClick={handleElementClick}></div>
  <div className='element' onClick={handleElementClick}></div>
</div>

这种方法适合子元素本身需要处理点击事件，或者你希望精确控制哪些子元素不会触发父容器事件的场景。不过如果子元素很多，逐个绑定事件会比较繁琐，这时候方案1会更高效。

需要注意的是，React中的事件是合成事件，但它的冒泡机制和原生DOM事件是一致的，所以上面两种方法都能正常工作。

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