preventdefault()用于阻止可取消事件的默认行为，需在事件处理函数中同步调用；常见于自定义表单提交、禁用链接跳转、阻止右键菜单等场景，调用前建议检查e.cancelable，并可结合条件判断或stoppropagation使用。

在 JavaScript 中，preventDefault() 用于阻止事件的默认行为，比如点击链接跳转、表单提交刷新页面、空格键滚动页面等。它必须在事件处理函数中调用，且只对可取消的事件（event.cancelable === true）生效。

什么时候需要 preventDefault？

常见场景包括：

• 自定义表单提交逻辑（如用 AJAX 提交），避免页面刷新
• 点击链接时执行 JS 逻辑，但不跳转到 href 地址
• 阻止右键弹出上下文菜单（contextmenu 事件）
• 禁用输入框的默认粘贴/回车行为，改由自己处理
• 阻止触摸或键盘操作引发的页面滚动（如拖拽时按空格键）

基本用法：绑定事件并调用 preventDefault

直接在事件回调中调用即可：

document.querySelector('a').addEventListener('click', function(e) {
  e.preventDefault(); // 阻止跳转
  console.log('链接被点击，但未跳转');
});

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止提交和页面刷新
  // 这里可以发 AJAX 请求
});

注意 preventDefault 的调用时机和限制

以下几点容易出错，需特别留意：

• 必须在事件处理函数中调用，不能在异步回调（如 setTimeout 或 Promise 中）调用，否则无效
• 调用前可先检查 e.cancelable，避免对不可取消事件报错（虽然多数情况不会报错，但属良好习惯）
• 它只影响当前事件，不影响事件冒泡；如需同时阻止冒泡，要额外调用 e.stopPropagation()
• 某些浏览器对特定事件（如 keydown 中的 Space 键）有特殊处理，可能需结合 e.stopImmediatePropagation() 或监听更早阶段（如 keydown 而非 keyup）

实用小技巧：条件性阻止默认行为

不是所有情况下都要阻止，默认行为有时仍需保留。例如：仅当用户按住 Ctrl 键时才允许链接跳转。

link.addEventListener('click', function(e) {
  if (!e.ctrlKey) {
    e.preventDefault();
  }
  // Ctrl+点击则正常跳转，否则只执行 JS 逻辑
});

又如：表单验证失败时阻止提交，成功时放行：

form.addEventListener('submit', function(e) {
  if (!validateForm()) {
    e.preventDefault();
    alert('请修正错误后再提交');
  }
});

不复杂但容易忽略。关键是理解它作用于事件本身、必须同步调用、且只对可取消事件有效。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南