为何React的onContextMenu在Chrome禁用元素上可生效？

现象概述 #

• 原生HTML场景：所有主流浏览器中，禁用的<button>元素无法触发contextmenu事件，以下代码不会在控制台打印内容：

<button
    type="button"
    onContextMenu="console.log(123)"
    disabled
>
    Click me
</button>

这是因为DOM规范明确规定，禁用状态的交互元素不会触发用户交互类事件（包括鼠标右键菜单事件）。

• React场景：使用React组件实现相同逻辑时，仅Chrome浏览器会在控制台打印123，其他浏览器无输出，代码示例：

const MyComponent = () => (
    <button
        type="button"
        onContextMenu={() => console.log(123)}
        disabled
    >
        Click me
    </button>
);

原生与React事件绑定的核心差异 #

1. 原生事件绑定机制
   原生HTML的onContextMenu是直接绑定在目标DOM元素上的。由于禁用元素的DOM行为限制，这类元素本身不会触发任何用户交互事件，所以绑定在元素上的事件处理函数根本不会被调用。

2. React合成事件机制
   React的onContextMenu属于合成事件，它并非直接绑定在目标DOM元素上，而是通过事件委托在顶层DOM节点（通常是document）统一监听事件。当事件发生时，React会根据事件的冒泡路径，在自己的虚拟DOM中找到对应的组件，再执行绑定的处理函数。

Chrome特殊表现的原因 #

Chrome浏览器对禁用元素的事件冒泡逻辑有特殊实现：

• 虽然禁用元素本身不会触发contextmenu事件，但该事件仍然会冒泡到父元素，直至顶层文档节点。
• 由于React的合成事件依赖顶层监听，它能捕获到这个冒泡上来的事件，进而找到对应的组件并执行事件处理函数。

而Firefox、Safari等浏览器遵循更严格的DOM规范：禁用元素的用户交互事件不会产生冒泡，React的顶层监听无法捕获到事件，因此不会执行处理函数。

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