React中如何监听父div点击事件且点击子div时不触发？

这里提供两种常用的可直接落地的实现方式：

方案1：父元素点击事件中判断触发源 #

核心逻辑是校验点击事件的触发源是否为父元素本身，只有匹配时才执行业务逻辑，不需要改动子元素的任何配置：

import { useRef } from 'react';

function DemoComponent() {
  // 绑定父元素的ref
  const parentRef = useRef(null);

  const parentClickHandler = (e) => {
    // 仅当点击的元素就是父元素本身时才执行逻辑
    if (e.target === parentRef.current) {
      // 此处写点击黑色区域要执行的业务逻辑
      console.log('点击了父级黑色区域');
    }
  }

  return (
    <div 
      ref={parentRef}
      onClick={parentClickHandler}
      style={{ width: '600px', height: '600px', background: '#000', padding: '50px' }}
    >
      {/* 白色子区域，无需额外配置 */}
      <div style={{ width: '400px', height: '400px', background: '#fff' }}>
        此区域点击不会触发父级逻辑
      </div>
    </div>
  )
}

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

核心逻辑是子元素触发点击事件时直接停止事件向上传播，父元素就不会接收到子元素的点击事件，适合子元素本身有独立点击逻辑的场景：

function DemoComponent() {
  const parentClickHandler = () => {
    // 此处写点击黑色区域要执行的业务逻辑
    console.log('点击了父级黑色区域');
  }

  const childClickHandler = (e) => {
    // 阻止事件冒泡到父元素
    e.stopPropagation();
    // 此处可写子元素自身的点击逻辑，没有可以省略
  }

  return (
    <div 
      onClick={parentClickHandler}
      style={{ width: '600px', height: '600px', background: '#000', padding: '50px' }}
    >
      {/* 白色子区域，绑定阻止冒泡的逻辑 */}
      <div 
        onClick={childClickHandler}
        style={{ width: '400px', height: '400px', background: '#fff' }}
      >
        此区域点击不会触发父级逻辑
      </div>
    </div>
  )
}

两种方案按需选择即可，如果子元素数量多且没有独立点击需求，更推荐用方案1，不需要给所有子元素额外绑定事件。

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