event.preventdefault() 是阻止默认行为最标准的方式,适用于点击链接跳转、表单提交、右键弹菜单、回车提交、复选框切换等可取消的默认行为,但需在事件处理函数中同步调用且 e.cancelable === true。

直接调用 event.preventDefault() 是阻止默认行为最标准、最可靠的方式,但必须在事件处理函数中同步执行,且前提是该事件本身支持取消(event.cancelable === true)。
哪些操作会触发默认行为?
浏览器对某些元素和事件有预设响应,比如:
-
@#@#@#@#@#@#@#@#@#@0点击 → 无跳转,此时 preventDefault() 无效(因无默认行为)
preventDefault() 的正确用法
必须满足三个条件才有效:
- 在事件回调函数内调用(不能异步,如
setTimeout里调用就失效) - 事件对象未被池化复用(React 中需先
e.persist()或提前读取属性) - 检查
e.cancelable:为false时说明该事件天生不可取消(如部分scroll、touchmove在 passive 模式下)
示例:安全拦截表单提交
document.getElementById('myForm').addEventListener('submit', e => {<br> if (e.cancelable) e.preventDefault();<br> console.log('已拦截,可走 AJAX');<br>});
移动端 touch 事件特别注意
现代浏览器默认将 touchstart 和 touchmove 设为 passive: true,此时直接调用
preventDefault() 会报错。
<p>解决方法:显式传入 <code>{ passive: false }</code></p>
element.addEventListener('touchmove', e => {<br> e.preventDefault();<br>}, { passive: false });
⚠️ 注意:仅在确实需要阻止滚动(如自定义滑动组件)时才设 passive: false,否则影响页面滑动流畅性。
其他方式不推荐单独使用
-
return false:在原生 JS 中仅等价于preventDefault()(不阻止冒泡),且只在传统onclick属性或内联 handler 中生效;在addEventListener中完全无效 -
e.returnValue = false:IE 专用写法,现代开发无需兼容,可忽略 -
event.stopPropagation():只管冒泡,不管默认行为——它和preventDefault()是两件事
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











