event.preventDefault()仅对浏览器有默认行为的事件有效，如a标签跳转、表单提交、空格键滚屏；需在事件处理中及时调用，且应通过event.target或event.currentTarget判断并调用，而非依赖this；它不阻止冒泡，与stopPropagation()无关；移动端touchstart慎用；表单按钮应设type="button"并JS兜底。

event.preventDefault() 什么时候必须调用

不是所有事件都能或需要阻止默认行为，只有那些浏览器自带响应逻辑的事件才有效——比如 click 在 <a> 上会跳转、submit 在 <form> 上会刷新页面、keydown 输入空格时滚动页面。如果你绑了事件但发现页面还是跳走了、表单还是提交了、按空格还是滚屏了，大概率是忘了调 preventDefault()，或者调得太晚。

为什么在箭头函数里 this 指向不对还影响 preventDefault

使用 addEventListener 时若传入箭头函数，this 不再指向触发事件的元素，但这本身不影响 preventDefault()；真正出问题的是你误以为能靠 this 判断是否该阻止——比如写成 if (this.tagName === 'A') this.preventDefault()，结果 this 是外层作用域对象，直接报错或静默失败。

• 正确做法：从事件对象 event 入手，用 event.target 或 event.currentTarget
• event.target 是实际点击的节点（可能为子元素）
• event.currentTarget 才是绑定监听器的那个元素，更稳妥
• 示例：

  button.addEventListener('click', (e) => {
    if (e.currentTarget.matches('[data-no-nav]')) {
      e.preventDefault(); // ✅ 正确
    }
  });

阻止默认行为但又想保留冒泡怎么办

preventDefault() 和 stopPropagation() 完全独立。很多人混淆二者，以为阻止默认就会中断事件流——其实不会。比如给一个带 <a href="/home"> 的按钮加点击监听，只调 e.preventDefault()，链接不跳转，但父级的 click 依然会收到事件。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 仅阻止默认：就只调 e.preventDefault()
• 同时阻止冒泡：额外加 e.stopPropagation()
• 注意 return false 在 jQuery 里等价于两者都调，但在原生 JS 中只是退出函数，**完全不阻止默认行为**
• 常见误写：

  link.addEventListener('click', () => false); // ❌ 无效

移动端 touchstart 里 preventDefault 的特殊坑

在 iOS Safari 和部分安卓 WebView 中，对 touchstart 调用 preventDefault() 会禁用后续的 click 事件（300ms 延迟被绕过，但 click 直接没了），尤其当你想自定义拖拽却还希望按钮可点时，很容易踩中。

立即学习“前端免费学习笔记（深入）”；

• 解决方案：优先用 touch-action: none CSS 控制（如 style="touch-action: none;"），比 JS 阻止更轻量且不影响 click
• 真要 JS 处理：只在明确需要拦截的时机调 preventDefault()，比如判断手指移动距离 > 10px 后才阻止
• 别在所有 touchstart 里无条件调，否则按钮点不动、下拉刷新失灵都是它干的

实际项目里最常漏掉的，是表单内按钮没加 type="button"，结果默认是 submit，一点击就刷新——这时候光在 JS 里 preventDefault() 不够，得双保险：HTML 层面设对 type，JS 层面再兜底。