如何在document事件监听器中禁用React所有click合成事件

核心原理 #

React的click合成事件采用事件委托机制实现：React 17+版本委托挂载到应用根容器节点（如#root）的冒泡阶段，React 16及更早版本委托挂载到document节点的冒泡阶段。原生DOM事件的执行优先级高于同阶段的合成事件，利用事件流的执行时序可以轻松阻断合成事件触发。

实现方案 #

方案1（适配React 17+版本） #

将document的事件监听器设置为捕获阶段触发，此时它的执行时机早于所有冒泡阶段的合成事件，调用stopPropagation阻断事件冒泡到根容器后，就不会触发任何React的click合成事件：

// 第三个参数设为true表示监听器在捕获阶段执行
document.addEventListener('click', (nativeEvent) => {
  // 你的自定义监听器逻辑
  if (/* 满足需要禁用合成事件的条件 */) {
    nativeEvent.stopPropagation();
  }
}, true);

方案2（兼容React 16及更早版本） #

旧版本React的合成事件直接绑定在document的冒泡阶段，直接调用stopImmediatePropagation即可阻断同节点上后续注册的React合成事件监听器执行：

document.addEventListener('click', (nativeEvent) => {
  // 你的自定义监听器逻辑
  if (/* 满足需要禁用合成事件的条件 */) {
    nativeEvent.stopImmediatePropagation();
  }
});

注意事项 #

• 上述阻断逻辑仅对当前触发的单次事件生效，不会永久禁用所有合成事件，不需要额外恢复操作
• 不要在React的合成事件回调中调用上述原生事件的阻止方法，React封装的合成事件实例的相关方法无法影响原生事件流

内容的提问来源于stack exchange，提问作者步行街