HTML中如何禁止链接的默认跳转行为

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《HTML中如何禁止链接的默认跳转行为》，聊聊，希望可以帮助到正在努力赚钱的你。

e.preventDefault() 有时无效的主因是事件未绑定到真正触发目标：如监听却点击其子元素，或在表单中误监听click而非submit；href="#"会触发锚点滚动且preventDefault无法阻止；古董浏览器需兼容e.returnValue=false；框架中修饰符须直接作用于标签本身。

为什么 e.preventDefault() 有时没用？

最常见的情况是：事件根本没绑定到真正被点击的元素上。比如 里嵌了 或图标，你监听的是 ，但 event.target 实际是子元素——而子元素没有 href，自然不触发跳转，也无需阻止；但你以为绑对了，结果点击后还是跳走了。

另一个高频坑：在 submit 场景下误监听 click 而非 submit。表单提交的默认行为只能由 submit 事件的 preventDefault() 阻止，click 在 上调用 preventDefault() 是无效的。

• 用 console.log(event.target) 确认实际触发目标
• 优先监听 自身，避免依赖事件冒泡
• 若必须委托，确保父容器不拦截或吞掉事件

href="#" + preventDefault() 仍会滚到顶部？

是的，而且这是浏览器标准行为：# 触发锚点定位，不属于“导航”范畴，preventDefault() 对它无效。页面会瞬间跳回顶部，哪怕 JS 执行成功。

这不是 bug，是规范定义的行为。想彻底避免滚动，有且只有两个干净解法：

• 改用 href="javascript:void(0)" —— 无语义、无副作用，老但稳
• 直接移除 href 属性，再用 CSS 补回链接样式（如 cursor: pointer; text-decoration: underline;）

别碰 href="#some-id" 后再靠 JS 拦——只要 ID 存在，滚动就发生，preventDefault() 来不及。

兼容性：IE8 及更老浏览器怎么写？

现代写法 e.preventDefault() 在 IE9+ 有效；IE6–8 只认 e.returnValue = false。如果项目还需支持这些古董，得兜底：

link.addEventListener('click', function(e) {
  if (e.preventDefault) {
    e.preventDefault();
  } else {
    e.returnValue = false;
  }
});

或者更简单粗暴：直接在内联 onclick 里写 return false，它同时干掉默认行为和冒泡，兼容性完美，但不够灵活。

Vue/React 里 @click.prevent 失效怎么办？

框架修饰符失效，大概率是事件没落在原生 上。比如你写了：

<div @click.prevent>
  <a href="/home">首页</a>
</div>

这不行——@click.prevent 绑在

上，但跳转由 的原生行为触发，框架修饰符拦不住。

正确做法只有一条：修饰符必须作用于带 href 的 标签本身：

<a href="/home" @click.prevent="handleClick">首页</a>

React 同理，必须 { e.preventDefault(); ... }}>，不能套在父容器上。

真正容易被忽略的是可访问性：用 href="javascript:void(0)" 或删 href 后，屏幕阅读器可能无法识别这是可交互元素。如果它承载功能（比如展开菜单），请补上 role="button" 和 tabindex="0"。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~

今日头条app我的钱包在哪里_今日头条app查看余额位置【介绍】

上一篇

今日头条app我的钱包在哪里_今日头条app查看余额位置【介绍】

下一篇

如何理解自动装箱与拆箱机制对集合操作便捷性的提升