React中event.stopPropagation()对addEventListener绑定监听无效问题

问题描述 #

我有一个嵌套按钮的div容器，容器与按钮均绑定了onMouseDown监听器，按钮的监听器通过调用event.stopPropagation()阻止事件冒泡：

• 点击容器时，控制台会打印“MouseDown”；
• 点击按钮时，因事件冒泡被阻止，控制台无输出。

但当我通过addEventListener为容器绑定mousedown监听器后，点击按钮时该监听器仍会执行，event.stopPropagation()并未阻止它。这是为什么？该如何解决？

代码示例 #

export const App = () => {
  const divRef = useRef()

  useEffect(() => {
    // 点击按钮时本不应执行，但实际执行了
    divRef.current.addEventListener("mousedown", () => console.log("NewMouseDown"))   
  }, [])

  return (
    <div onMouseDown={() => console.log("MouseDown")} ref={divRef}>
      <button onMouseDown={e => e.stopPropagation()}>Stop propagation</button>
    </div>
  );
}

原因分析 #

核心问题是React合成事件与原生DOM事件的执行逻辑不兼容：

1. React的合成事件会被统一挂载到顶层document节点处理，属于事件冒泡的后期阶段；而通过addEventListener绑定的原生DOM事件，会直接在DOM元素的冒泡/捕获阶段触发，执行时机早于React合成事件。
2. 按钮上调用的e.stopPropagation()只能阻止React合成事件的冒泡流程，无法影响原生DOM事件的传播——因为原生事件触发时，React的合成事件阻止逻辑还未生效，两者属于不同的事件处理链路。

解决方法 #

方法一：统一使用React合成事件（推荐） #

把原生事件监听改成React的onMouseDown合成事件，这样就能被按钮的stopPropagation()正常阻止：

export const App = () => {
  const handleDivMouseDown = () => {
    console.log("MouseDown");
    console.log("NewMouseDown");
  }

  return (
    <div onMouseDown={handleDivMouseDown}>
      <button onMouseDown={e => e.stopPropagation()}>Stop propagation</button>
    </div>
  );
}

方法二：原生事件中使用stopImmediatePropagation()（不推荐） #

如果必须保留原生事件绑定，需要在按钮的原生事件中调用event.stopImmediatePropagation()，同时替换React合成事件为原生事件：

export const App = () => {
  const divRef = useRef()

  useEffect(() => {
    const div = divRef.current;
    const btn = div.querySelector('button');

    // 按钮绑定原生事件，阻止所有后续事件传播
    const handleBtnMouseDown = (e) => {
      e.stopPropagation();
      e.stopImmediatePropagation();
    };
    btn.addEventListener('mousedown', handleBtnMouseDown);

    // 容器绑定原生事件
    const handleDivMouseDown = () => console.log("NewMouseDown");
    div.addEventListener("mousedown", handleDivMouseDown);

    // 组件卸载时清理监听
    return () => {
      btn.removeEventListener('mousedown', handleBtnMouseDown);
      div.removeEventListener("mousedown", handleDivMouseDown);
    }
  }, [])

  return (
    <div ref={divRef}>
      <button>Stop propagation</button>
    </div>
  );
}

这种方法会打破React事件模型的一致性，仅在特殊场景下使用。

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