javascript中阻止默认行为用event.preventdefault()，阻止事件冒泡用event.stoppropagation()；二者独立且可共用，需通过事件对象调用。
在 JavaScript 中，阻止默认行为和阻止事件冒泡是两个独立但常一起使用的操作，核心靠事件对象（event）的两个方法：preventDefault() 和 stopPropagation()。用对了，就能精准控制点击、提交、跳转等交互逻辑，避免意外刷新、跳转或父级响应。
怎么阻止默认行为（preventDefault）
默认行为指浏览器对某些元素的“自带反应”，比如：点击 @#@#@#@#@#@#@#@#@#@0 → 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，不加干预就会两个都触发。
<ul>
<li>调用 <code>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 不再触发'))
e.cancelBubble = true，现代项目可忽略e.preventDefault(); e.stopPropagation();
什么时候该用哪个？关键看需求
判断依据很简单：
- 只想“不让它干浏览器本来要干的事” → 用
preventDefault() - 只想“别让上面的父元素跟着响应” → 用
stopPropagation() - 既要拦住跳转/刷新，又不想影响父级逻辑（比如弹窗里的按钮不该触发背后遮罩层关闭）→ 两个都用
- 注意：阻止冒泡不会影响同一级其他监听器（如多个
addEventListener绑定的同个元素上的 click），只影响向上路径
小提醒：别漏掉事件对象参数
这两个方法都必须在事件处理函数中通过 event 参数调用。常见错误是忘记传参或写错名，比如：
- ❌
btn.addEventListener('click', () => { preventDefault(); })—— 没有 event 参数，报错 - ✅
btn.addEventListener('click', e => { e.preventDefault(); })—— 正确写法 - ✅
btn.onclick = function(e) { e.stopPropagation(); }
