17370845950

事件冒泡是指事件从目标元素逐级向上传播至document的过程；可通过stopPropagation()阻止冒泡，preventDefault()阻止默认行为，二者作用不同且可共存。

JavaScript 事件冒泡是指当一个元素上的事件被触发时，该事件会从目标元素逐级向上传播到其父元素，直到 document 根节点的过程。这是事件流的默认行为之一（另一个是捕获阶段，但冒泡更常用、更直观）。

事件冒泡是怎么发生的

比如你点击一个按钮，而这个按钮在 div 里，div 又在 body 里。点击后，事件会先在按钮上触发，然后“冒泡”到 div，再冒泡到 body，最后到 document。每个中间容器如果绑定了同类型的事件监听器（如 click），都会依次执行。

这本身不是 bug，而是设计机制，方便用事件委托（比如给 ul 绑定 click，通过 event.target 判断点的是哪个 li）。

如何阻止事件冒泡

调用事件对象的 stopPropagation() 方法即可中断向上传播：

• 只影响当前事件监听器之后的冒泡路径，不影响同一元素上其他监听器的执行
• 写在事件处理函数内部，例如：e.stopPropagation();
• 注意：IE8 及更早版本用 e.cancelBubble = true; 兼容（现代开发一般不需考虑）

如何阻止默认行为

很多 HTML 元素有自带行为，比如点击 a 标签会跳转、提交表单会刷新页面、按空格键在 checkbox 上会切换选中状态。这些是“默认行为”，可通过 preventDefault() 阻止：

• 写法示例：e.preventDefault();
• 它和冒泡无关，只管是否执行浏览器原本要做的事
• 对没有默认行为的元素（如 div）调用它无效果

stopPropagation 和 preventDefault 的区别

这两个方法常被混淆，但作用完全不同：

• stopPropagation() → 管“传不传”：阻止事件继续往父级冒泡
• preventDefault() → 管“做不做”：阻止浏览器执行该事件对应的默认动作
• 两者可同时使用，互不影响。例如：点击链接既不跳转，也不触发父 div 的 click 监听器