按钮本身不跳转，真正触发跳转或刷新的是带 href 的 <a> 标签、表单内未设 type 的 <button> 或 <input type="submit">；应分别监听 click 和 submit 事件并调用 e.preventDefault() 拦截。
HTML按钮标签本身不会跳转，真正需要阻止默认行为的是 <a> 链接或表单内的 <button type="submit">。所以问题核心其实是：**哪些按钮类元素会触发跳转或刷新？怎么用 JavaScript 精准拦截？**
按钮本身不跳转，但这些情况会“假装”是按钮
常见混淆点在于把 <a> 标签写成按钮样式，或把 <button> 放进表单却没处理提交逻辑。它们的“默认行为”不同：
-
<a href="xxx">：点击后跳转到 href 指向地址（包括href="#"会滚回顶部） -
<button>在<form>内且未设type：浏览器按规范视为type="submit"，触发表单提交 → 页面刷新 -
<input type="submit">：同上，直接提交表单
阻止 a 标签跳转的推荐写法
保留语义、可访问性好，且便于后续扩展逻辑：
- 给
<a>绑定click事件，在回调中调用e.preventDefault() - 确保事件绑定在真实被点击的元素上（比如你点了图标，但监听的是外层
<a>，那就没问题；如果只监听了图标，而用户点的是文字部分，就可能失效） - 示例：
<a href="https://example.com" id="myLink">点我弹窗</a>
<script>document.getElementById('myLink').addEventListener('click', e => {<br> e.preventDefault();<br> alert('已拦截跳转');<br>});</script>
阻止表单内按钮刷新页面的关键操作
不是给按钮加 preventDefault，而是监听 form 的 submit 事件：
立即学习“Java免费学习笔记（深入）”；
- 表单提交可能由点击 submit 按钮触发，也可能由回车键触发 —— 监听
form.submit能一并覆盖 - 在事件回调里调用
e.preventDefault()，之后再执行你的 JS 逻辑（如发请求、校验、弹窗等） - 示例：
<form id="myForm">
<input name="email">
<button type="submit">提交</button>
</form>
<script>document.getElementById('myForm').addEventListener('submit', e => {<br> e.preventDefault();<br> console.log('表单已拦截，可走 AJAX');<br>});</script>
更轻量的替代方案：改 type 或去 href
如果只是静态交互，无需复杂事件流，可以绕过 JS 拦截：
- 把
<button>明确写成<button type="button">：它彻底失去提交能力，点击只触发 click 事件 - 把
<a>的href去掉或设为javascript:void(0)：前者语义丢失需补 CSS，后者保留链接外观但无跳转（不推荐用于可访问性要求高的场景） - 注意：
return false在原生 JS 中 ≠preventDefault，它只退出函数，不阻止默认行为
