react如何阻止冒泡

阻止事件冒泡的方法

在React中阻止事件冒泡可以通过以下几种方式实现：

event.stopPropagation() 在事件处理函数中调用该方法可以阻止事件继续向上冒泡。这是最直接的方法。

function handleClick(event) {
  event.stopPropagation();
  // 其他处理逻辑
}

event.nativeEvent.stopImmediatePropagation() 如果需要完全阻止事件传播，包括同一元素上的其他监听器，可以使用该方法。

function handleClick(event) {
  event.nativeEvent.stopImmediatePropagation();
}

合成事件处理

React使用合成事件系统，所有事件都自动绑定到document节点。要阻止事件冒泡到React事件系统之外的原生DOM节点：

function handleClick(event) {
  event.stopPropagation();
  event.nativeEvent.stopImmediatePropagation();
}

捕获阶段处理

通过在捕获阶段处理事件并阻止传播，可以更早地拦截事件：

<div onClickCapture={handleCaptureClick}>
  <button onClick={handleClick}>点击</button>
</div>

function handleCaptureClick(event) {
  event.stopPropagation();
}

注意事项

React 17+版本中事件委托方式有所变化，事件不再委托到document而是委托到root DOM容器。这可能会影响某些阻止冒泡的行为。

对于Portal中的内容，事件冒泡会按照React树而非DOM树传播，需要注意这一特殊行为。