React event.stopPropagation（） 在 element.addEventListener 之后不起作用

问：

我有一个带有按钮的 div 容器。容器和按钮都有侦听器。但是，按钮的侦听器会停止传播事件。所以：onMouseDown

• 当我单击容器时，“MouseDown”事件被记录到控制台中，
• 当我单击按钮时，不会记录任何内容，因为按钮会停止事件冒泡。

目前为止，一切都好。但是，当我将侦听器添加到容器中时，即使我单击按钮也会调用它。所以按钮的 stopProgapagation（） 不会阻止这个侦听器的执行。为什么？我该如何解决这个问题？这是一个完整的演示。mousedownaddEventListener

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

  useEffect(() => {
    // Shouldn't be executed when I click on the button, but it is.
    divRef.current.addEventListener("mousedown", () => console.log("NewMouseDown"))   
  }, [])

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