stopPropagation()阻止事件冒泡传播，preventDefault()阻止浏览器默认行为；前者管“事件往哪传”，后者管“浏览器干啥事”，二者作用对象和效果完全不同，不可混用或相互替代。
这两个方法都作用于事件对象，但解决的是完全不同的问题：一个是管“事件往哪传”，一个是管“浏览器干啥事”。用错一个，行为就和预期差很远。
stopPropagation：管住事件的传播路径
点击一个按钮时，事件会顺着 DOM 树向上“冒泡”，从按钮 → 父 div → body → document。如果父级也绑了 click，它也会被触发。stopPropagation 就是让这个冒泡过程在当前元素这里停下来，不往上走了。
- 不影响默认行为：比如点击链接，仍会跳转；点击 submit 按钮，表单仍会提交
- 只影响事件流：阻止的是事件在 DOM 中的传递，对浏览器该做的动作毫无干涉
- 典型场景：弹窗内部点击不关闭弹窗，但点弹窗外区域要关闭 → 给弹窗加 stopPropagation，给 document 加隐藏逻辑
preventDefault：管住浏览器的默认动作
某些 HTML 元素自带行为：a 标签跳转、form 提交、空链接触发滚动、键盘回车触发表单等。preventDefault 就是告诉浏览器：“这次别按老规矩来了”。
- 不影响事件传播：冒泡照常进行，父级 click 依然会执行
- 只影响默认行为：禁用跳转、禁用提交、禁用右键菜单等，但事件本身还在继续走
- 典型场景：自定义下拉菜单，点击 a 标签只展开菜单，不跳转；或表单校验失败时，阻止提交
别混淆 return false（尤其在原生 JS 中）
在 jQuery 里，return false 等价于同时调用 preventDefault 和 stopPropagation；但在原生 addEventListener 中，return false 只在部分旧写法下有效，且行为不一致。所以强烈建议：
立即学习“Java免费学习笔记（深入）”；
- 想阻止跳转/提交 → 明确写 event.preventDefault()
- 想阻止父级响应 → 明确写 event.stopPropagation()
- 避免依赖 return false 做关键控制，尤其跨浏览器或现代项目中
怎么检查是否已调用 preventDefault？
事件对象上有个只读属性 event.defaultPrevented，返回布尔值。比如在父级监听函数里判断子元素是否已取消默认行为：
if (e.defaultPrevented) console.log('子元素已阻止默认行为');
