尧图网页设计 
做后台管理系统或者官网的时候几乎每个前端都遇到过这种破事产品经理跟你说“这个菜单先不跳转点一下要弹登录框”“这个链接是给用户看的点了先别动我后面要接埋点”“这几个Tab看着像链接但你给我做成切换页签”。结果你去翻代码发现页面里躺着的全是a href...。你要临时禁掉跳转、禁掉定位锚点还得保证后面的交互不受影响。这个需求看着简单但坑一点不少href#会让页面滚回顶部javascript:void(0)又丑又危险pointer-events: none直接让 hover 和点击事件一起消失更别说移动端还有点击穿透、中间键新开标签这些边角问题。这篇文章就把我这几年前端生涯里处理 a 标签跳转和定位链接的经验整理一遍从最基础的 CSS 到事件拦截、事件委托再到可访问性和 SEO 的取舍一次性说透。1. 这个需求到底从哪来业务场景与禁用跳转的本质1.1 最常见的几种“想禁止 a 标签跳转”的场景先说我从实际项目里趟出来的高频场景你可能也遇到过登录拦截。网站里有些页面需要登录才能看点击链接先弹登录框登录成功后再放行。这时候 a 标签的跳转就得被拦下来否则直接进页面毫无意义。二次确认弹窗。比如“删除项目”“终止任务”这类危险操作前端通常会把入口伪装成链接但点击后要弹确认框确认后才允许跳转。纯展示型的“伪按钮”。UI 稿上写的明明是个按钮但后端模板或者老同事的代码里写的是a比如表格里“查看”“编辑”这些操作列很多时候只是打开一个弹窗根本不需要跳转。异步加载占位。在 SPA 里遇到过a href/detail/123但详情数据是通过异步接口拉下来后弹抽屉展示的跳转反而是错误行为。富文本编辑器里的外链预览。用户在编辑器里粘贴了一堆链接后台预览页不想让这些链接真的可以点出去。锚点定位链接。href#section-2这类页面内定位在固定表头、Tab 切换、手风琴折叠的场景里默认的“跳锚点”行为会打乱 UI 状态需要禁用后手动接管滚动。搞明白一件事这个问题才算想透a 标签的“跳转”本质上是浏览器的默认行为我们要做的不是把 a 标签删掉而是拦截或者替换这个默认行为同时尽量保留可维护性和可访问性。1.2 一条 a 标签在浏览器里到底会触发哪些默认行为很多人只知道“点击跳转”但实际上 a 标签在浏览器里默认会做四件事改变页面 URL并尝试加载新文档有href且有效如果是href#id格式滚动到对应锚点位置并更新 URL 中的 hash如果带了target_blank新开一个标签页或窗口如果是下载链接响应头或者download属性触发下载而不是跳转。当我们说“禁用 a 标签跳转页面或定位链接”实际上就是要把上述默认行为按需掐掉。流程上浏览器分发 click 事件后默认行为发生在事件分发完毕之后所以核心思路就是两个方向用 CSS 直接让默认行为没有触发入口或者用 JavaScript 在 click 事件里调用preventDefault()拦截默认行为。下图是我处理这类问题时画的心智逻辑你可以对照自己手里的情况选方案2. 基础方案先铺路href 与 target 的另类用法2.1 href#: 一个坑了无数人的占位写法新手最爱干的事就是不想跳转时写a href#。结果点击之后 URL 后面多了一个#页面还会在部分浏览器里滚回顶部特别是页面很长时极其恼人。href#本质上是一个指向当前文档顶部的有效链接浏览器会把它当成锚点处理。它带来的问题不只是滚动在 SPA 里它还会触发hashchange事件可能又带出一堆路由逻辑调试的时候够你喝一壶的。如果你只是想要一个“不干活的 href 占位”我建议直接用hrefjavascript:void(0)都比href#强一档但它也不是最优解原因下面说。尽量记住别再用#做空链接占位了哪怕加个注释说“这里不跳转”也比默默跳回顶部强。2.2 hrefjavascript:void(0)能用但不推荐的理由老代码里很常见a hrefjavascript:void(0) onclickopenLayer()点击弹窗/a它的原理是让浏览器执行一段 JavaScript 表达式void(0)永远返回undefined所以页面不会跳转URL 也不会变成乱七八糟的链接。能用但我个人是强烈不推荐的原因有四条地址栏可能显示javascript:void(0)有的浏览器还会给出安全提示观感很差搜索引擎爬虫会把这种链接当成无内容链接不利于 SEO如果里面拼接了用户输入内容存在 XSS 风险它把行为写死在标签属性里后期维护特别痛苦你根本搜不到哪个地方绑定了什么逻辑。如果历史项目里已经大量存在改起来成本太高可以先留着但新代码不要再写。新代码的逻辑应该是href 里放一个真实的 URL哪怕它永远被拦下给没有 JS 的环境或者 SEO 一个兜底。2.3 target_blank 与中间键问题禁用跳转的边界条件还有一个经常被忽略的边界用户鼠标中键/滚轮点击链接时浏览器会直接新开标签页完全不走 click 事件默认行为拦截。这就很尴尬了你明明在 click 里preventDefault()了用户中键一点照样打开新页面。这种问题通常出现在“伪按钮”上——用户把链接当成按钮但中键点击触发了不该有的跳转。处理方式是多监听一个auxclick事件鼠标非主键点击document.querySelector(a.no-link).addEventListener(auxclick, function (e) { e.preventDefault(); });兼容性方面auxclick现代浏览器基本都支持老 IE 可以不处理因为 IE 本来就没有中键打开新标签的默认行为一致性。这个细节写在最前面是因为很多人做到一半说“preventDefault 没用”八成就是被中键或者新标签打开给坑了。3. 正确禁用姿势CSS pointer-events 与 JavaScript 拦截3.1 CSS 方案pointer-events: none 的适用边界CSS 里最简单粗暴的方式是a.no-link { pointer-events: none; cursor: default; color: inherit; text-decoration: none; }加上pointer-events: none后元素不会成为鼠标事件的目标点击直接穿透到下层跳转、hover、点击事件全部失效。这个方案最省事在纯展示、不考虑任何交互的场景下非常好用。但它的副作用同样明显hover 效果直接消失:hover伪类也不触发如果你还想让鼠标放上去有点反馈就得用.no-link:hover { ... }以外的办法根本写不了子元素也被连带禁用子元素想单独响应点击是不可能的JS 绑定在 a 标签上的 click 事件同样失效因为这个元素根本收不到点击事件键盘用户仍然可以用 Tab 聚焦并按回车但 click 事件也会因为 pointer-events 的原因某种程度上不一致可访问性体验不完整。所以我把pointer-events: none的适用场景限定为服务端渲染的页面、后台管理系统里灰置的菜单项、纯视觉效果的区域。一旦这个 a 标签还需要配合 JS 做业务逻辑就别用纯 CSS 拦老老实实走事件方案。注意如果你只是想禁用跳转但保留 hover 样式和 JS 交互不要用pointer-events: none。它是一刀切不是手术刀。3.2 JS 事件拦截addEventListener preventDefault 的标准写法这是最日常、最可控的方案a href/detail/123 classjs-need-login查看详情/aconst loginLink document.querySelector(.js-need-login); loginLink.addEventListener(click, function (e) { e.preventDefault(); showLoginModal(); // 你的业务逻辑 });为什么preventDefault()能拦住跳转因为浏览器在事件分发完成后才会执行默认行为preventDefault就是在这个节点上告诉浏览器“这个默认行为我不需要了你别执行”。这是 DOM 标准行为所有现代浏览器都支持。这里补几个我实际总结的细节一次监听可以同时处理“跳转”“锚点”“表单提交”三类默认行为所以你别在事件函数里写一堆判断直接统一preventDefault再走业务逻辑如果还要跳转但想晚点跳可以setTimeout延后再window.location.href url但要注意这是主动跳转跟默认跳转不同别搞混如果用户在监听函数里触发异常preventDefault没执行页面可能会跳转所以重要业务逻辑要try...catch包住一个元素上绑了多个 click 监听其中一个preventDefault并不会取消其他监听默认行为最终看有没有被阻止。多说说很多人会问的“键盘问题”。a 标签在键盘上按 Enter 也会触发 click 事件所以你在 click 里preventDefault()就能同时拦住鼠标和键盘的默认行为这点不用额外处理。但屏幕阅读器用户会听到“链接”的读法后面第 5 章再展开。3.3 return false 的传统写法与现代事件监听之间的差异如果你维护过老项目一定见过这种写法a href/detail/123 onclickreturn false查看详情/a或者a href/detail/123 onclickreturn checkLogin()查看详情/a内联onclick里的return false等价于调用preventDefault()并阻止事件冒泡在旧时代确实能拦住跳转。但它的问题非常明显内联事件处理器里的函数是全局查找的大项目里保不准哪个全局变量被覆盖了报错时定位困难内联代码混合在 HTML 里内容安全策略CSP环境下会被直接拦截用了严格 CSP 的站点页面表现会莫名其妙失效和addEventListener混用时作用域和调用顺序难以把控还容易出现“return false 只拦了一次”的幻觉。现代项目统一用addEventListener处理就好。如果你在维护旧系统可以把它改成document.querySelector(a.old-link).addEventListener(click, function (e) { e.preventDefault(); const url this.getAttribute(href); // 原有业务逻辑 });顺手说一个判断技巧**如果页面里有a href# onclickreturn false它本质上是一个纯按钮最佳修复是把标签换成button。**后面会详细讲怎么换。4. 动态内容与批量场景事件委托处理实用方案4.1 委托到父容器一条代码管住所有 a 标签很多时候页面里的 a 标签是异步加载出来的比如后台返回的数据渲染列表每个条目都有操作链接。你不能再挨个绑定事件委托是最合适的方案document.addEventListener(click, function (e) { const link e.target.closest(a); if (!link) return; // 约定带>a href/detail/123 click.preventopenDetail查看详情/aReacta href/detail/123 onClick{(e) { e.preventDefault(); openDetail(); }}查看详情/a.prevent修饰符就是preventDefault的语法糖效果一样的。这条经验送给被原生 DOM 折磨完又进框架的同学别再用href# onlickreturn false框架里处理起来反而更简单。4.2 移动端场景touch 事件的坑与防双击处理移动端禁跳转最容易翻车的地方是第一次点击被拦截了但第二次点击却被穿透到下层元素。这个问题的根源是 click 在移动端有 300ms 延迟的老历史虽然现在已经大幅缓解但在某些 webview 里还是会出现。我建议移动端不要依赖touchstart里preventDefault来拦截跳转除非你有明确把握否则它会把滚动、缩放、点击等一大批原生行为全部禁掉副作用极大。正确做法是依然使用 click 事件拦截同时在“伪按钮”上做防重复提交判断。比如连续快速点击两次链接第一次弹了确认框第二次又弹一个这就需要加标志位let isLocked false; link.addEventListener(click, function (e) { if (isLocked) { e.preventDefault(); return; } isLocked true; e.preventDefault(); // 业务逻辑 // 完成后的回调里再把 isLocked 释放 });实际项目里我遇到过更隐蔽的问题移动端页面上用一个蒙层遮住页面点击蒙层关闭后蒙层下面的链接被激活。这是经典的click 穿透处理方法是让蒙层关闭延迟 300ms 左右或者在关闭时把底层元素的 pointer-events 临时禁掉再恢复这个不属于本文重点但在“禁跳转”场景里配合出现过提一嘴。4.3 锚点定位链接的特殊处理阻止平滑滚动与阻止跳转的区别定位链接分两种一种是页面内href#section-2另一种是通过 JS 滚动比如scrollIntoView。如果你只想让用户点击 Tab 时不要跳到锚点位置而是让 JS 来自动切换内容可以这样做tabLink.addEventListener(click, function (e) { e.preventDefault(); const targetId this.getAttribute(href); // #section-2 const targetEl document.querySelector(targetId); if (targetEl) { targetEl.scrollIntoView({ behavior: smooth, block: start }); } });这里的关键认知是禁用默认锚点跳转不代表不滚动而是把“滚动到哪、怎么滚”的控制权交给 JS。preventDefault拦掉的是浏览器自带的“瞬间定位到锚点”之后你完全可以按产品需求手动接管滚动位置和动画方式。还有一个相关坑全局 CSS 里如果写了html { scroll-behavior: smooth; }即使你preventDefault拦住了锚点跳转某些浏览器对scrollIntoView的平滑表现依然受它控制做性能测试时要注意区分。还有更常见的业务场景是 SPA 里的路由 hash。锚点href#/home这种写法经常跟路由冲突如果你只是不想让 hash 改变同样用preventDefault拦掉即可但要注意如果这个链接同时又是路由入口只拦点击是不够的要确认没有其他地方触发 hash 变更。5. 方案对比与选型建议别一上来就上 JS5.1 几种方案横向对比表照着选就行我把自己常用方案整理成了一张表你可以直接对照场景选择方案写法适用场景主要风险推荐度pointer-events: noneCSS 一行纯展示、灰置状态hover 和 click 全失效适合展示场景href#HTML几乎不推荐回顶、hash 污染不推荐hrefjavascript:void(0)HTML兼容老系统安全隐患、SEO 差不推荐新用preventDefault()JS绝大多数交互场景需管理事件绑定最推荐事件委托 >container.addEventListener(click, function (e) { const link e.target.closest(a); if (link !link.hasAttribute(data-allow-link)) { e.preventDefault(); } });5.3 可访问性与 SEO禁跳转不能把“可用性”也禁没了这一节是很多人容易忽略的a 标签本身是有语义的把它变成“不跳转的链接”对屏幕阅读器用户是一种欺骗。屏幕阅读器会把a href...识别为链接并朗读出来用户以为可以跳转结果按下后什么也没发生体验非常差。键盘用户用 Tab 聚焦到一个“禁跳转”的链接上按回车没反应会以为网站坏了。所以最佳实践是分级处理如果它是一个操作按钮请换成button。button 天然支持键盘交互、屏幕阅读器朗读、禁用的disabled状态比你在 a 标签上模拟这些行为省心一百倍。视觉上想让它像链接就用 CSS 调整。如果必须保留 a 标签比如保留 SEO 权重、保留右键复制链接功能、保持 HTML 结构那么禁用跳转的同时用aria-disabledtrue告诉辅助技术这是禁用状态并加上tabindex-1让键盘焦点跳过避免用户踩坑link.setAttribute(aria-disabled, true); link.setAttribute(tabindex, -1);不要删掉 href 属性。很多人以为去掉 href 链接就不跳转了并没错但去掉 href 后a 标签不再可聚焦屏幕阅读器也不会把它当链接读当年辛辛苦苦写的语义就白费了。保留真实 href配合 JS 拦截才是规范和体验兼顾的做法。SEO 方面href里的真实地址对爬虫仍有意义如果你确实是想让搜索引擎不抓某个链接更合适的做法是加relnofollow而不是费尽心思禁掉点击。禁跳转是给用户的交互规则SEO 是给爬虫的访问规则两者别混为一谈。具体结构上我处理这类需求时的最终顺序是这样的看 HTML 语义是否应为按钮是就换 button必须保留 a 标签就用preventDefault()统一拦截动态渲染的列表内容用 document 级事件委托 > 前端禁用a标签跳转：从preventDefault到事件委托
做后台管理系统或者官网的时候几乎每个前端都遇到过这种破事产品经理跟你说“这个菜单先不跳转点一下要弹登录框”“这个链接是给用户看的点了先别动我后面要接埋点”“这几个Tab看着像链接但你给我做成切换页签”。结果你去翻代码发现页面里躺着的全是a href...。你要临时禁掉跳转、禁掉定位锚点还得保证后面的交互不受影响。这个需求看着简单但坑一点不少href#会让页面滚回顶部javascript:void(0)又丑又危险pointer-events: none直接让 hover 和点击事件一起消失更别说移动端还有点击穿透、中间键新开标签这些边角问题。这篇文章就把我这几年前端生涯里处理 a 标签跳转和定位链接的经验整理一遍从最基础的 CSS 到事件拦截、事件委托再到可访问性和 SEO 的取舍一次性说透。1. 这个需求到底从哪来业务场景与禁用跳转的本质1.1 最常见的几种“想禁止 a 标签跳转”的场景先说我从实际项目里趟出来的高频场景你可能也遇到过登录拦截。网站里有些页面需要登录才能看点击链接先弹登录框登录成功后再放行。这时候 a 标签的跳转就得被拦下来否则直接进页面毫无意义。二次确认弹窗。比如“删除项目”“终止任务”这类危险操作前端通常会把入口伪装成链接但点击后要弹确认框确认后才允许跳转。纯展示型的“伪按钮”。UI 稿上写的明明是个按钮但后端模板或者老同事的代码里写的是a比如表格里“查看”“编辑”这些操作列很多时候只是打开一个弹窗根本不需要跳转。异步加载占位。在 SPA 里遇到过a href/detail/123但详情数据是通过异步接口拉下来后弹抽屉展示的跳转反而是错误行为。富文本编辑器里的外链预览。用户在编辑器里粘贴了一堆链接后台预览页不想让这些链接真的可以点出去。锚点定位链接。href#section-2这类页面内定位在固定表头、Tab 切换、手风琴折叠的场景里默认的“跳锚点”行为会打乱 UI 状态需要禁用后手动接管滚动。搞明白一件事这个问题才算想透a 标签的“跳转”本质上是浏览器的默认行为我们要做的不是把 a 标签删掉而是拦截或者替换这个默认行为同时尽量保留可维护性和可访问性。1.2 一条 a 标签在浏览器里到底会触发哪些默认行为很多人只知道“点击跳转”但实际上 a 标签在浏览器里默认会做四件事改变页面 URL并尝试加载新文档有href且有效如果是href#id格式滚动到对应锚点位置并更新 URL 中的 hash如果带了target_blank新开一个标签页或窗口如果是下载链接响应头或者download属性触发下载而不是跳转。当我们说“禁用 a 标签跳转页面或定位链接”实际上就是要把上述默认行为按需掐掉。流程上浏览器分发 click 事件后默认行为发生在事件分发完毕之后所以核心思路就是两个方向用 CSS 直接让默认行为没有触发入口或者用 JavaScript 在 click 事件里调用preventDefault()拦截默认行为。下图是我处理这类问题时画的心智逻辑你可以对照自己手里的情况选方案2. 基础方案先铺路href 与 target 的另类用法2.1 href#: 一个坑了无数人的占位写法新手最爱干的事就是不想跳转时写a href#。结果点击之后 URL 后面多了一个#页面还会在部分浏览器里滚回顶部特别是页面很长时极其恼人。href#本质上是一个指向当前文档顶部的有效链接浏览器会把它当成锚点处理。它带来的问题不只是滚动在 SPA 里它还会触发hashchange事件可能又带出一堆路由逻辑调试的时候够你喝一壶的。如果你只是想要一个“不干活的 href 占位”我建议直接用hrefjavascript:void(0)都比href#强一档但它也不是最优解原因下面说。尽量记住别再用#做空链接占位了哪怕加个注释说“这里不跳转”也比默默跳回顶部强。2.2 hrefjavascript:void(0)能用但不推荐的理由老代码里很常见a hrefjavascript:void(0) onclickopenLayer()点击弹窗/a它的原理是让浏览器执行一段 JavaScript 表达式void(0)永远返回undefined所以页面不会跳转URL 也不会变成乱七八糟的链接。能用但我个人是强烈不推荐的原因有四条地址栏可能显示javascript:void(0)有的浏览器还会给出安全提示观感很差搜索引擎爬虫会把这种链接当成无内容链接不利于 SEO如果里面拼接了用户输入内容存在 XSS 风险它把行为写死在标签属性里后期维护特别痛苦你根本搜不到哪个地方绑定了什么逻辑。如果历史项目里已经大量存在改起来成本太高可以先留着但新代码不要再写。新代码的逻辑应该是href 里放一个真实的 URL哪怕它永远被拦下给没有 JS 的环境或者 SEO 一个兜底。2.3 target_blank 与中间键问题禁用跳转的边界条件还有一个经常被忽略的边界用户鼠标中键/滚轮点击链接时浏览器会直接新开标签页完全不走 click 事件默认行为拦截。这就很尴尬了你明明在 click 里preventDefault()了用户中键一点照样打开新页面。这种问题通常出现在“伪按钮”上——用户把链接当成按钮但中键点击触发了不该有的跳转。处理方式是多监听一个auxclick事件鼠标非主键点击document.querySelector(a.no-link).addEventListener(auxclick, function (e) { e.preventDefault(); });兼容性方面auxclick现代浏览器基本都支持老 IE 可以不处理因为 IE 本来就没有中键打开新标签的默认行为一致性。这个细节写在最前面是因为很多人做到一半说“preventDefault 没用”八成就是被中键或者新标签打开给坑了。3. 正确禁用姿势CSS pointer-events 与 JavaScript 拦截3.1 CSS 方案pointer-events: none 的适用边界CSS 里最简单粗暴的方式是a.no-link { pointer-events: none; cursor: default; color: inherit; text-decoration: none; }加上pointer-events: none后元素不会成为鼠标事件的目标点击直接穿透到下层跳转、hover、点击事件全部失效。这个方案最省事在纯展示、不考虑任何交互的场景下非常好用。但它的副作用同样明显hover 效果直接消失:hover伪类也不触发如果你还想让鼠标放上去有点反馈就得用.no-link:hover { ... }以外的办法根本写不了子元素也被连带禁用子元素想单独响应点击是不可能的JS 绑定在 a 标签上的 click 事件同样失效因为这个元素根本收不到点击事件键盘用户仍然可以用 Tab 聚焦并按回车但 click 事件也会因为 pointer-events 的原因某种程度上不一致可访问性体验不完整。所以我把pointer-events: none的适用场景限定为服务端渲染的页面、后台管理系统里灰置的菜单项、纯视觉效果的区域。一旦这个 a 标签还需要配合 JS 做业务逻辑就别用纯 CSS 拦老老实实走事件方案。注意如果你只是想禁用跳转但保留 hover 样式和 JS 交互不要用pointer-events: none。它是一刀切不是手术刀。3.2 JS 事件拦截addEventListener preventDefault 的标准写法这是最日常、最可控的方案a href/detail/123 classjs-need-login查看详情/aconst loginLink document.querySelector(.js-need-login); loginLink.addEventListener(click, function (e) { e.preventDefault(); showLoginModal(); // 你的业务逻辑 });为什么preventDefault()能拦住跳转因为浏览器在事件分发完成后才会执行默认行为preventDefault就是在这个节点上告诉浏览器“这个默认行为我不需要了你别执行”。这是 DOM 标准行为所有现代浏览器都支持。这里补几个我实际总结的细节一次监听可以同时处理“跳转”“锚点”“表单提交”三类默认行为所以你别在事件函数里写一堆判断直接统一preventDefault再走业务逻辑如果还要跳转但想晚点跳可以setTimeout延后再window.location.href url但要注意这是主动跳转跟默认跳转不同别搞混如果用户在监听函数里触发异常preventDefault没执行页面可能会跳转所以重要业务逻辑要try...catch包住一个元素上绑了多个 click 监听其中一个preventDefault并不会取消其他监听默认行为最终看有没有被阻止。多说说很多人会问的“键盘问题”。a 标签在键盘上按 Enter 也会触发 click 事件所以你在 click 里preventDefault()就能同时拦住鼠标和键盘的默认行为这点不用额外处理。但屏幕阅读器用户会听到“链接”的读法后面第 5 章再展开。3.3 return false 的传统写法与现代事件监听之间的差异如果你维护过老项目一定见过这种写法a href/detail/123 onclickreturn false查看详情/a或者a href/detail/123 onclickreturn checkLogin()查看详情/a内联onclick里的return false等价于调用preventDefault()并阻止事件冒泡在旧时代确实能拦住跳转。但它的问题非常明显内联事件处理器里的函数是全局查找的大项目里保不准哪个全局变量被覆盖了报错时定位困难内联代码混合在 HTML 里内容安全策略CSP环境下会被直接拦截用了严格 CSP 的站点页面表现会莫名其妙失效和addEventListener混用时作用域和调用顺序难以把控还容易出现“return false 只拦了一次”的幻觉。现代项目统一用addEventListener处理就好。如果你在维护旧系统可以把它改成document.querySelector(a.old-link).addEventListener(click, function (e) { e.preventDefault(); const url this.getAttribute(href); // 原有业务逻辑 });顺手说一个判断技巧**如果页面里有a href# onclickreturn false它本质上是一个纯按钮最佳修复是把标签换成button。**后面会详细讲怎么换。4. 动态内容与批量场景事件委托处理实用方案4.1 委托到父容器一条代码管住所有 a 标签很多时候页面里的 a 标签是异步加载出来的比如后台返回的数据渲染列表每个条目都有操作链接。你不能再挨个绑定事件委托是最合适的方案document.addEventListener(click, function (e) { const link e.target.closest(a); if (!link) return; // 约定带>a href/detail/123 click.preventopenDetail查看详情/aReacta href/detail/123 onClick{(e) { e.preventDefault(); openDetail(); }}查看详情/a.prevent修饰符就是preventDefault的语法糖效果一样的。这条经验送给被原生 DOM 折磨完又进框架的同学别再用href# onlickreturn false框架里处理起来反而更简单。4.2 移动端场景touch 事件的坑与防双击处理移动端禁跳转最容易翻车的地方是第一次点击被拦截了但第二次点击却被穿透到下层元素。这个问题的根源是 click 在移动端有 300ms 延迟的老历史虽然现在已经大幅缓解但在某些 webview 里还是会出现。我建议移动端不要依赖touchstart里preventDefault来拦截跳转除非你有明确把握否则它会把滚动、缩放、点击等一大批原生行为全部禁掉副作用极大。正确做法是依然使用 click 事件拦截同时在“伪按钮”上做防重复提交判断。比如连续快速点击两次链接第一次弹了确认框第二次又弹一个这就需要加标志位let isLocked false; link.addEventListener(click, function (e) { if (isLocked) { e.preventDefault(); return; } isLocked true; e.preventDefault(); // 业务逻辑 // 完成后的回调里再把 isLocked 释放 });实际项目里我遇到过更隐蔽的问题移动端页面上用一个蒙层遮住页面点击蒙层关闭后蒙层下面的链接被激活。这是经典的click 穿透处理方法是让蒙层关闭延迟 300ms 左右或者在关闭时把底层元素的 pointer-events 临时禁掉再恢复这个不属于本文重点但在“禁跳转”场景里配合出现过提一嘴。4.3 锚点定位链接的特殊处理阻止平滑滚动与阻止跳转的区别定位链接分两种一种是页面内href#section-2另一种是通过 JS 滚动比如scrollIntoView。如果你只想让用户点击 Tab 时不要跳到锚点位置而是让 JS 来自动切换内容可以这样做tabLink.addEventListener(click, function (e) { e.preventDefault(); const targetId this.getAttribute(href); // #section-2 const targetEl document.querySelector(targetId); if (targetEl) { targetEl.scrollIntoView({ behavior: smooth, block: start }); } });这里的关键认知是禁用默认锚点跳转不代表不滚动而是把“滚动到哪、怎么滚”的控制权交给 JS。preventDefault拦掉的是浏览器自带的“瞬间定位到锚点”之后你完全可以按产品需求手动接管滚动位置和动画方式。还有一个相关坑全局 CSS 里如果写了html { scroll-behavior: smooth; }即使你preventDefault拦住了锚点跳转某些浏览器对scrollIntoView的平滑表现依然受它控制做性能测试时要注意区分。还有更常见的业务场景是 SPA 里的路由 hash。锚点href#/home这种写法经常跟路由冲突如果你只是不想让 hash 改变同样用preventDefault拦掉即可但要注意如果这个链接同时又是路由入口只拦点击是不够的要确认没有其他地方触发 hash 变更。5. 方案对比与选型建议别一上来就上 JS5.1 几种方案横向对比表照着选就行我把自己常用方案整理成了一张表你可以直接对照场景选择方案写法适用场景主要风险推荐度pointer-events: noneCSS 一行纯展示、灰置状态hover 和 click 全失效适合展示场景href#HTML几乎不推荐回顶、hash 污染不推荐hrefjavascript:void(0)HTML兼容老系统安全隐患、SEO 差不推荐新用preventDefault()JS绝大多数交互场景需管理事件绑定最推荐事件委托 >container.addEventListener(click, function (e) { const link e.target.closest(a); if (link !link.hasAttribute(data-allow-link)) { e.preventDefault(); } });5.3 可访问性与 SEO禁跳转不能把“可用性”也禁没了这一节是很多人容易忽略的a 标签本身是有语义的把它变成“不跳转的链接”对屏幕阅读器用户是一种欺骗。屏幕阅读器会把a href...识别为链接并朗读出来用户以为可以跳转结果按下后什么也没发生体验非常差。键盘用户用 Tab 聚焦到一个“禁跳转”的链接上按回车没反应会以为网站坏了。所以最佳实践是分级处理如果它是一个操作按钮请换成button。button 天然支持键盘交互、屏幕阅读器朗读、禁用的disabled状态比你在 a 标签上模拟这些行为省心一百倍。视觉上想让它像链接就用 CSS 调整。如果必须保留 a 标签比如保留 SEO 权重、保留右键复制链接功能、保持 HTML 结构那么禁用跳转的同时用aria-disabledtrue告诉辅助技术这是禁用状态并加上tabindex-1让键盘焦点跳过避免用户踩坑link.setAttribute(aria-disabled, true); link.setAttribute(tabindex, -1);不要删掉 href 属性。很多人以为去掉 href 链接就不跳转了并没错但去掉 href 后a 标签不再可聚焦屏幕阅读器也不会把它当链接读当年辛辛苦苦写的语义就白费了。保留真实 href配合 JS 拦截才是规范和体验兼顾的做法。SEO 方面href里的真实地址对爬虫仍有意义如果你确实是想让搜索引擎不抓某个链接更合适的做法是加relnofollow而不是费尽心思禁掉点击。禁跳转是给用户的交互规则SEO 是给爬虫的访问规则两者别混为一谈。具体结构上我处理这类需求时的最终顺序是这样的看 HTML 语义是否应为按钮是就换 button必须保留 a 标签就用preventDefault()统一拦截动态渲染的列表内容用 document 级事件委托 >