React实现父Div可点击且阻止子Link事件冒泡的问题

你的问题核心是React Router的<Link>组件点击时，父Div的onClick事件会被触发，且直接给<Link>加的stopPropagation不生效。这是因为React的合成事件机制，以及<Link>内部会处理点击事件导致自定义onClick的执行时机或优先级出现问题。以下是几种可行的解决办法：

方法一：给Link的子元素绑定阻止冒泡事件 #

点击Link区域时，实际触发点击的是其内部的子元素（比如你的<b>标签），把stopPropagation绑定到子元素上，就能阻止事件冒泡到父Div：

<CardDiv
  className="Card__main"
  onClick={() => {
    console.log("PARENT");
  }}
>
  <Link to="https://www.example.com/">
    <b 
      onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
        event.stopPropagation();
      }}
    >
      {props.title}
    </b>
  </Link>
</CardDiv>

方法二：父Div主动判断点击源 #

在父Div的onClick事件里，通过原生DOM方法判断点击目标是否属于Link元素，若属于则跳过父逻辑：

<CardDiv
  className="Card__main"
  onClick={(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    // 检查点击目标是否是Link或其后代元素
    if (!(event.target as HTMLElement).closest('a')) {
      console.log("PARENT");
    }
  }}
>
  <Link to="https://www.example.com/">
    <b>{props.title}</b>
  </Link>
</CardDiv>

方法三：使用原生事件阻止立即冒泡 #

绕过React合成事件，直接调用原生事件的stopImmediatePropagation，阻止后续事件处理函数执行：

<CardDiv
  className="Card__main"
  onClick={() => {
    console.log("PARENT");
  }}
>
  <Link
    to="https://www.example.com/"
    onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
      event.nativeEvent.stopImmediatePropagation();
    }}
  >
    <b>{props.title}</b>
  </Link>
</CardDiv>

各方法说明 #

• 方法一：简单直接，适合子元素明确的场景；
• 方法二：逻辑集中在父组件，无需修改子元素，扩展性更强；
• 方法三：针对React合成事件的特殊情况，强制阻止事件传递。

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