preventdefault()仅在事件cancelable为true时有效，需在事件处理函数内调用；可取消事件如click、submit等，不可取消事件如load、error调用无效；与stoppropagation()功能正交，应按需组合使用。
preventDefault() 是 JavaScript 中用于取消事件默认行为的方法，必须在事件处理函数中调用，且仅对可取消的事件（cancelable === true）生效。
什么时候可以调用 preventDefault()
只有当事件对象的 cancelable 属性为 true 时，调用 preventDefault() 才有效。例如：
-
click、submit、keydown、contextmenu等多数用户交互事件默认可取消 -
load、error、scroll（部分场景）等事件不可取消，调用无效 - 可通过
event.cancelable判断：if (event.cancelable) event.preventDefault();
常见误用与注意事项
直接调用或时机不当会导致预期外行为：
- 不能在事件处理函数外部调用，必须传入事件对象（如
function(e) { e.preventDefault(); }） - 在事件冒泡阶段调用仍有效，但若父元素已阻止默认行为，子元素无需重复调用
- 表单提交中，仅阻止
submit事件即可，不必再阻止click按钮事件（除非有额外需求） - 右键菜单（
contextmenu）需显式调用，否则浏览器仍会弹出默认菜单
与 stopPropagation() 的区别
preventDefault() 只影响事件的默认动作，不影响事件传播；stopPropagation() 则阻止事件继续冒泡或捕获，两者互不干扰：
- 阻止链接跳转但允许事件冒泡到父容器 → 只用
preventDefault() - 阻止表单提交且避免触发父级监听器 → 同时用
preventDefault()和stopPropagation() - 推荐按需组合，避免无意义地同时调用
现代写法建议
使用箭头函数时注意 this 绑定问题，推荐显式传参；同时可结合可选链和类型检查提升健壮性：
- ✅ 推荐：
form.addEventListener('submit', e => { e.preventDefault(); doSubmit(); }); - ❌ 避免：
button.onclick = () => e.preventDefault();（e未定义） - ✅ 安全判断：
if (e && typeof e.preventDefault === 'function' && e.cancelable) e.preventDefault();
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
