JavaScript中阻止默认行为用event.preventDefault()，阻止事件冒泡用event.stopPropagation()；二者独立且可共用，需通过事件对象调用。
在 JavaScript 中，阻止默认行为和阻止事件冒泡是两个独立但常一起使用的操作，核心靠事件对象（event）的两个方法：preventDefault() 和 stopPropagation()。用对了，就能精准控制点击、提交、跳转等交互逻辑，避免意外刷新、跳转或父级响应。
怎么阻止默认行为（preventDefault）
默认行为指浏览器对某些元素的“自带反应”，比如：点击 <a href="..."> 会跳转、提交 <form> 会刷新页面、按回车会触发表单提交、右键会弹出菜单等。只有具备默认行为的元素（且事件可取消，即 event.cancelable === true）才能被阻止。
- 调用
event.preventDefault()即可取消——这是标准、跨浏览器的写法 - 常见使用场景：
- 链接点击不跳转：
<a id="link" href="/home">首页</a>→link.addEventListener('click', e => { e.preventDefault(); console.log('已拦截'); }) - 表单提交不刷新：
form.addEventListener('submit', e => { e.preventDefault(); fetch('/api', { method: 'POST', body: new FormData(form) }); }) - 禁用右键菜单：
document.addEventListener('contextmenu', e => e.preventDefault()) - 阻止输入框回车提交：
input.addEventListener('keydown', e => { if (e.key === 'Enter') e.preventDefault(); })
- 链接点击不跳转：
- 注意：
return false在原生事件中**只等价于preventDefault()**（不阻止冒泡），不要误以为它能同时停冒泡；jQuery 中的return false才两者都做。
怎么阻止事件冒泡（stopPropagation）
事件冒泡指事件从目标元素出发，逐层向上传播到父、祖父直至 document 的过程。比如点击一个按钮，如果它的 <div> 父容器也绑了 click，不加干预就会两个都触发。
- 调用
event.stopPropagation()可中断向上传播路径，不影响当前元素的事件处理，也不影响默认行为 - 典型例子：
<div id="outer"><button id="inner">点我</button></div>inner.addEventListener('click', e => { e.stopPropagation(); console.log('只触发 inner'); })outer.addEventListener('click', () => console.log('outer 不再触发'))
- 兼容旧 IE（已基本淘汰）需额外写
e.cancelBubble = true，现代项目可忽略 - 若想彻底隔绝事件（既不冒泡也不执行默认行为），就两个方法都调用：
e.preventDefault(); e.stopPropagation();
什么时候该用哪个？关键看需求
判断依据很简单：
立即学习“Java免费学习笔记（深入）”；
- 只想“不让它干浏览器本来要干的事” → 用
preventDefault() - 只想“别让上面的父元素跟着响应” → 用
stopPropagation() - 既要拦住跳转/刷新，又不想影响父级逻辑（比如弹窗里的按钮不该触发背后遮罩层关闭）→ 两个都用
- 注意：阻止冒泡不会影响同一级其他监听器（如多个
addEventListener绑定的同个元素上的 click），只影响向上路径
小提醒：别漏掉事件对象参数
这两个方法都必须在事件处理函数中通过 event 参数调用。常见错误是忘记传参或写错名，比如：
- ❌
btn.addEventListener('click', () => { preventDefault(); })—— 没有 event 参数，报错 - ✅
btn.addEventListener('click', e => { e.preventDefault(); })—— 正确写法 - ✅
btn.onclick = function(e) { e.stopPropagation(); }
