事件传播
事件处理函数将捕获任何来自子组件的事件。事件会沿着树向上“冒泡”或“传播”：它从事件发生的地方开始，然后沿着树向上传播。
在 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>
每个事件分三个阶段传播：
- 它向下传播，调用所有的 onClickCapture 处理函数。
- 它执行被点击元素的 onClick 处理函数。
- 它向上传播，调用所有的 onClick 处理函数。
阻止默认行为
e.preventDefault()
e.stopPropagation() 阻止触发绑定在外层标签上的事件处理函数。
e.preventDefault() 阻止少数事件的默认浏览器行为。
