react如何阻止冒泡
阻止事件冒泡的方法
在React中阻止事件冒泡可以通过以下几种方式实现：
使用event.stopPropagation()
在事件处理函数中调用event.stopPropagation()可以阻止事件向上冒泡：
function handleClick(event) {
event.stopPropagation();
console.log('事件冒泡被阻止');
}
<div onClick={handleClick}>点击我</div>使用event.nativeEvent.stopImmediatePropagation()
如果需要完全阻止事件传播（包括同一元素上的其他监听器），可以使用：
function handleClick(event) {
event.nativeEvent.stopImmediatePropagation();
console.log('事件传播完全停止');
}合成事件处理
React的合成事件系统会自动处理事件委托，有时可能需要额外注意：
function Parent() {
const handleParentClick = () => {
console.log('父元素点击');
};
const handleChildClick = (e) => {
e.stopPropagation();
console.log('子元素点击，阻止冒泡');
};
return (
<div onClick={handleParentClick}>
<button onClick={handleChildClick}>点击按钮</button>
</div>
);
}使用事件捕获阶段
通过在捕获阶段处理事件并阻止传播：
<div onClickCapture={(e) => e.stopPropagation()}>
<button onClick={() => console.log('按钮点击')}>点击</button>
</div>注意事项
React的事件系统是合成事件，与原生DOM事件有所不同。stopPropagation只会阻止React事件的冒泡，不会影响原生DOM事件。如果需要完全阻止原生事件，需使用nativeEvent。
某些React版本中，在异步回调中使用事件对象可能导致问题，因为React会重用事件对象。如需在异步中使用，需调用event.persist()。
