阻止事件冒泡用event.stopPropagation()（IE8用cancelBubble=true），阻止默认行为用event.preventDefault()；二者作用不同、不可互替，可同时调用或用stopImmediatePropagation()更彻底阻止；原生JS中return false无效。

JavaScript 事件处理中，阻止事件冒泡和默认行为是两个常见且关键的操作，它们分别通过 event.stopPropagation() 和 event.preventDefault() 实现，作用不同、不可互相替代。

如何阻止事件冒泡

事件冒泡指事件从触发元素逐级向上传播到父元素的过程。比如点击一个按钮，如果按钮和它的父 <div> 都绑定了 <code>click 监听器，不加干预时两者都会响应。

• 调用 event.stopPropagation() 可立即中断冒泡路径，阻止事件继续向父级传播
• 该方法不影响当前元素上其他同类型监听器的执行（除非已使用 once: true）
• 注意：IE8 及更早版本需用 event.cancelBubble = true

如何阻止默认行为

某些元素有浏览器内置的默认动作，例如：<a></a> 点击跳转、<form></form> 提交刷新页面、<input type="checkbox"> 点击切换勾选状态。

• 调用 event.preventDefault() 可取消这个默认动作，但不影响事件冒泡
• 常用于表单验证失败时禁止提交，或自定义链接跳转逻辑
• 在事件监听器中必须确保该方法被调用（不能放在异步回调里）

同时阻止冒泡和默认行为的写法

有时需要二者都禁用，比如实现一个可拖拽但点击时不跳转也不触发父容器操作的链接：

ImageMagick 批处理处理器

使用 ImageMagick 的 convert 和 mogrify 命令进行批量图像处理，支持调整大小、裁剪、水印和格式转换。与 libvips 集成以实现高性能缩略图生成。

下载

立即学习“Java免费学习笔记（深入）”；

• 直接在事件处理器中连续调用：event.stopPropagation(); event.preventDefault();
• 也可以简写为 event.stopImmediatePropagation(); —— 它不仅阻止冒泡，还会阻止同一事件阶段的其他监听器执行（比 stopPropagation 更彻底）
• 推荐优先使用语义明确的分开调用，便于维护和协作理解

实际应用中的注意事项

避免误用或遗漏是关键：

• 不要在条件分支外忘记调用 preventDefault()，否则默认行为仍会触发
• 在委托事件（如 document.addEventListener('click', handler)）中，应先判断 event.target 再决定是否阻止冒泡，否则可能影响全局交互
• return false 在 jQuery 中等价于同时调用 preventDefault 和 stopPropagation，但在原生 JS 中仅表示函数返回值，**完全无效**