在前端开发中，防止滚动事件“冒泡”到父元素或者窗口通常是一个常见需求。比如，在一个页面中有多个嵌套的滚动容器，我们需要确保只有当前的容器捕获并处理滚动事件。否则，如果滚动事件传递到了父级容器或者窗口，会导致不必要的滚动行为，影响用户体验。
什么是滚动“冒泡”
在浏览器中，当你在一个滚动容器（比如一个带有 overflow: auto 样式的 div 元素）中滚动时，该滚动事件将首先触发该容器的滚动事件处理程序。然后，这个事件将“冒泡”到所有父级容器，直至到达文档视口或者 window 对象。如果没有被任何父级容器或 window 对象处理，该事件会继续向上传递。
在某些情况下，滚动事件的“冒泡”可能会导致不必要的滚动行为。例如，当你在一个内部滚动容器中进行滚动时，如果该容器未能阻止滚动事件继续“冒泡”，那么外部的滚动容器也将随之滚动，这将导致不必要的 UI 变化。因此，防止滚动事件“冒泡”是一种重要的技巧。
如何防止滚动“冒泡”
有几种方法可以防止滚动事件“冒泡”。下面我们将逐一介绍它们的优缺点和实现方式。
方法一：使用 stopPropagation() 方法
在滚动事件处理程序中调用 Event 对象的 stopPropagation() 方法可以立即停止滚动事件的传播。例如：
--------------------------------------------------------------------- --------------- - ------------------------ ---
使用 stopPropagation() 方法的优点是非常简单明了，但也存在几个缺点。首先，它只能防止滚动事件从子元素向父元素或者 window 对象“冒泡”，而无法防止相反方向的传播。其次，如果你需要在父元素或者 window 对象中处理滚动事件，那么就无法使用该方法。最后，stopPropagation() 方法还可能会破坏事件委托模式，因为它会阻止后代元素上的监听器被调用。
方法二：使用 passive 选项
passive 选项是一个布尔值，用于指示事件处理程序是否许可浏览器在主线程上执行默认操作（比如滚动）而不等待 JavaScript 执行完成。当 passive 选项被设置为 true 时，表示事件处理程序不会调用 preventDefault() 方法，这可以大大提高滚动的性能。例如：
--------------------------------------------------------------------- --------------- - ----------------------- -- - -------- ---- ---
使用 passive 选项的优点是它可以防止滚动事件从子元素向父元素或者 window 对象“冒泡”，而且不会破坏事件委托模式。然而，它也存在一些缺点。首先，它只在较新的浏览器中得到支持。其次，如果你需要在父元素或者 window 对象中处理滚动事件，那么就无法使用该方法。
方法三：使用事件捕获模式
事件捕获模式（Capturing Mode）是一种事件传播方式，它与事件冒
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/14701