如何在React中阻止子组件手势穿透父组件？

Question

在嵌套组件中，子组件的点击事件会触发父组件的相同手势。例如，子组件是一个按钮，父组件是一个可点击的卡片，点击按钮时卡片的点击事件也会触发。如何实现仅子组件响应手势，阻止事件传递到父组件？

在嵌套组件中，子组件的点击事件会触发父组件的相同手势。例如，子组件是一个按钮，父组件是一个可点击的卡片，点击按钮时卡片的点击事件也会触发。如何实现仅子组件响应手势，阻止事件传递到父组件？

Answer 1

有两种方式：

1. 使用 e.stopPropagation() 阻止事件冒泡。
2. 使用 e.nativeEvent.stopImmediatePropagation()（极端情况）

const handleChildClick = (e) => {
   // 子事件点击之后的处理逻辑
   
    e.stopPropagation(); //  末尾加上，阻止事件冒泡
  };

Answer 2

DOM 的事件冒泡机制导致的。在子组件上侦听你不希望父组件触发的事件，并且使用 event.stopPropagation() 阻止冒泡即可。

Answer 3

阻止事件冒泡，event.stopPropagation()