React 事件函数传播及捕获

事件传播

事件处理函数将捕获任何来自子组件的事件。事件会沿着树向上“冒泡”或“传播”：它从事件发生的地方开始，然后沿着树向上传播。
在 React 中所有事件都会传播，除了 onScroll，它仅适用于你附加到的 JSX 标签。

   <div className="Toolbar" onClick={() => {
     alert('你点击了 toolbar ！');
   }}>
     <button onClick={() => alert('正在播放！')}>
       播放电影
     </button>
   </div>
   // 点击播放电影，先弹框 '正在播放！'，然后弹框'你点击了 toolbar ！'

• 阻止事件传播
  e.stopPropagation()
• 捕获子元素上的所有事件，即便它们阻止了传播，可以通过在事件名称末尾添加 Capture 来实现这一点

   <div onClickCapture={() => { /* 这会首先执行 */ }}>
     <button onClick={e => e.stopPropagation()} />
     <button onClick={e => e.stopPropagation()} />
   </div>

每个事件分三个阶段传播：

1. 它向下传播，调用所有的 onClickCapture 处理函数。
2. 它执行被点击元素的 onClick 处理函数。
3. 它向上传播，调用所有的 onClick 处理函数。

阻止默认行为

e.preventDefault()

e.stopPropagation() 阻止触发绑定在外层标签上的事件处理函数。
e.preventDefault() 阻止少数事件的默认浏览器行为。