event.preventdefault()仅对浏览器有默认行为的事件有效，如a标签跳转、表单提交、空格键滚屏；需在事件处理中及时调用，且应通过event.target或event.currenttarget判断并调用，而非依赖this；它不阻止冒泡，与stoppropagation()无关；移动端touchstart慎用；表单按钮应设type="button"并js兜底。
event.preventDefault() 什么时候必须调用
不是所有事件都能或需要阻止默认行为，只有那些浏览器自带响应逻辑的事件才有效——比如 click 在 <a></a> 上会跳转、submit 在 <form></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"></a> 的按钮加点击监听，只调 e.preventDefault()，链接不跳转，但父级的 click 依然会收到事件。
- 仅阻止默认：就只调
e.preventDefault() - 同时阻止冒泡：额外加
e.stopPropagation() - 注意
return false在 jQuery 里等价于两者都调，但在原生 JS 中只是退出函数，**完全不阻止默认行为** - 常见误写：
link.addEventListener('click', () => false); // ❌ 无效
移动端 touchstart 里 preventDefault 的特殊坑
在 iOS Safari 和部分安卓 WebView 中，对 touchstart 调用 preventDefault() 会禁用后续的 click 事件（300ms 延迟被绕过，但 click 直接没了），尤其当你想自定义拖拽却还希望按钮可点时，很容易踩中。
- 解决方案：优先用
touch-action: noneCSS 控制（如style="touch-action: none;"），比 JS 阻止更轻量且不影响 click - 真要 JS 处理：只在明确需要拦截的时机调
preventDefault()，比如判断手指移动距离 > 10px 后才阻止 - 别在所有
touchstart里无条件调，否则按钮点不动、下拉刷新失灵都是它干的
type="button"，结果默认是 submit，一点击就刷新——这时候光在 JS 里 preventDefault() 不够，得双保险：HTML 层面设对 type，JS 层面再兜底。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
