React 事件冒泡及处理

在 React 中，我们可以在创建 element 的时候，传入事件和处理函数，这些事件会被做为合成事件来处理，当然，有些时候，我们也需要定义原生事件，比如给 document 绑定事件。有些情况下，就需要通过阻止事件冒泡来实现预期的交互效果。

import React from "react";
class Demo1 extends React.Component {
  onClickInner(e) {
    console.log("inner div");
  }
  onClickOuter(e) {
    console.log("outer div");
  }
  render() {
    return (
      <div onClick={this.onClickOuter}>
        <div onClick={this.onClickInner}>inner div</div>
      </div>
    );
  }
}

当我们点击 inner div 时，控制台输出结果：

inner div
outer div

这两个事件都是合成事件，在点击时，两个事件会依次冒泡到 document,由统一的事件监听器处理。如果希望阻止 onClickOuter 触发，可以在 onClickInner 内调用 e.stopPropagation()。需要注意的是，这里的 e 是合成事件实例，调用 stopPropagation 也只能阻止合成事件的冒泡。