Next.js中如何为父div添加onClick且避免子元素触发该事件

问题原因 #

这个现象是浏览器事件冒泡机制导致的：子元素的点击事件会逐层向上传播到父元素，因此点击子元素时也会触发父元素绑定的onClick回调。

解决方法 #

方案1：判断事件触发源（推荐）

在父元素的点击回调中，判断触发事件的源是否为父元素本身，仅匹配时执行逻辑，修改后的代码如下：

<div 
  onClick={(e) => {
    // e.target 是实际被点击的元素，e.currentTarget 是绑定了点击事件的父div
    if (e.target === e.currentTarget) {
      /* 在此处写你要执行的回调逻辑 */
    }
  }}
>
  {/* 以下子元素点击不会触发父回调逻辑 */}
  <div className="css-bg">
    <button></button>
  </div>
  <span>Some Sample Text</span>
</div>

提示：Next.js的JSX语法中，HTML的class属性需要替换为className，不存在原生text标签，建议替换为span/p等标准文本标签。

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

如果子元素数量较少，可以直接给所有子元素绑定点击事件，阻止事件向上冒泡：

<div 
  onClick={() => {
    /* 要执行的回调逻辑 */
  }}
>
  <div 
    className="css-bg" 
    onClick={(e) => e.stopPropagation()}
  >
    <button onClick={(e) => e.stopPropagation()}></button>
  </div>
  <span onClick={(e) => e.stopPropagation()}>Some Sample Text</span>
</div>

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