阻止JS事件冒泡与捕获的方法解析

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《理解JS事件冒泡与捕获，如何阻止传播》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

事件传播分捕获（外→内）和冒泡（内→外）两阶段；stopPropagation()中断传播路径，preventDefault()取消默认行为，二者功能独立。

事件冒泡和捕获是 JavaScript 中事件传播的两个阶段，理解它们的关键在于知道事件在 DOM 树中“怎么走”——是从外向内，还是从内向外。阻止事件传播就是在这条路径上按一下暂停键，让后续阶段不执行。

事件捕获：从外到内的预热阶段

当用户触发一个事件（比如点击按钮），浏览器会先从 最外层的祖先元素（如 document）开始，一层层向下检查，直到目标元素。这个由外向内的过程叫捕获阶段。默认情况下，我们绑定的事件监听器不会在这个阶段触发，除非显式开启。

• 用 addEventListener 的第三个参数设为 true 可以让监听器在捕获阶段响应
• 例如：btn.addEventListener('click', handler, true)
• 捕获常用于在父级提前拦截或统一处理事件（如权限校验、日志记录）

事件冒泡：从内到外的默认路径

到达目标元素后，事件会“反弹”回去，从目标元素向上逐级通知父元素，直到 document。这就是冒泡阶段。它才是日常开发中最常打交道的部分。

• 像 onclick 和 addEventListener('click', handler)（不传第三个参数）都只在冒泡阶段触发
• 利用冒泡可以实现事件委托：给父容器绑定一次监听，靠 event.target 区分具体点击了哪个子元素
• 注意表单元素（如 <input>）的某些事件（如 focus、blur）不冒泡

怎样阻止事件继续传播

调用 event.stopPropagation() 可以立即中断当前事件在 DOM 树中的传播路径，无论它正处于捕获还是冒泡阶段。

• 它只阻止“后续节点”的触发，不影响当前节点上其他同阶段监听器的执行
• 如果想连当前节点上的其他监听器也跳过，要用 event.stopImmediatePropagation()
• 注意：return false 在 jQuery 里等价于 stopPropagation + preventDefault，但在原生 JS 中只是函数返回值，不会阻止传播

顺便说下 preventDefault：别搞混了

event.preventDefault() 和阻止传播无关，它只用来取消事件的默认行为（比如点击链接跳转、表单提交、右键弹菜单）。你可以只阻止默认行为，但允许冒泡；也可以只阻止冒泡，但保留默认行为。

• 例如阻止链接跳转但允许父级监听 click：event.preventDefault()
• 例如阻止冒泡但不干扰表单提交：event.stopPropagation()
• 两者常一起用，比如自定义右键菜单时：event.preventDefault(); event.stopPropagation();

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《阻止JS事件冒泡与捕获的方法解析》文章吧，也可关注golang学习网公众号了解相关技术文章。