说实话前端里没有哪个标签像a标签这样“天天见、天天被用错”。一说到禁用a标签跳转页面或定位链接绝大多数人第一反应就是写href#或者hrefjavascript:void(0)然后在 onclick 里返回一个false。这个做法在十年前确实能跑但它带出来的隐藏问题比它解决的问题还多点完之后地址栏多一个#、页面可能偷偷滚到顶部、在单页应用里直接把路由打乱、用户右键复制链接复制出一段“javascript:void(0)”……每一条都够闹心。这篇东西不是给你背属性的我想把“禁用 a 标签”这件事彻底拆开先搞清楚 a 标签到底跳的是什么再逐个拆解各种写法的坑然后重点讲“定位链接”这种特殊场景怎么做最后我会把项目里真正在用的封装方案和踩过的坑一次性倒出来。新同学可以从头看到尾老前端也可以重点扫第三、四章有些边界问题你八成也遇到过。1. a标签的默认行为到底是什么三种“跳转”必须分清1.1 浏览器眼中的“跳转”不只有换页面很多人把“a 标签跳转”和“页面跳转”画等号这是第一步就错了。浏览器处理href属性的默认行为粗略分有三种。第一种是常规页面导航比如hrefhttps://example.com或者href/detail?id1点击后浏览器卸载当前页面加载新地址。这种情况最常见的禁用诉求是表单没填完不许走、菜单当前项不可点、或者外链需要先经过一道确认。第二种是锚点定位也就是href#section这种写法。注意它本质上不是“导航到另一个文档”而是在当前文档里找一个idsection的元素然后滚动到它所在的视口位置同时把#section写进地址栏。这种“定位链接”在单页站、长列表页里非常常见禁用它的诉求也五花八门不想让地址栏变丑、不想用默认的瞬间滚动、或者想自己控制滚动到某个局部容器而不是窗口。第三种是协议类链接比如mailto:、tel:、甚至javascript:这些以协议开头的内容。它们不是导航而是触发某个外部动作。这类“跳转”有时候也想禁用比如你想把邮箱地址显示成链接的样子但不希望用户一点就拉起邮件客户端。三种行为的默认处理机制完全不同所以“禁用跳转”的手段必须是分层设计的你不可能用一个办法同时管住页面导航、锚点定位和协议触发。搞清楚你面对的是哪一种比急着写代码重要得多。1.2 href缺省时的 a 标签其实不算链接还有一个非常容易被忽略的事实a标签在没有href属性的时候从 HTML 语义上讲就不是一个链接。它不会进入 Tab 键的焦点序列屏幕阅读器也不会把它读成链接浏览器对它的唯一“默认行为”就是没有任何默认行为。这带来一个反直觉的结论——如果你想彻底禁掉一个 a 标签的所有跳转行为最朴素的办法其实是把href删掉而不是去拦截事件。但很多人不敢这么干是因为删了href之后样式会变手型光标没了、下划线也没了看起来就不像一个可点击的东西。这个“看起来不像”的问题恰恰说明你对这个元素本身的定位就是模糊的。所以我每次做技术方案之前都会先逼问自己一个问题这个交互到底是“链接”还是“按钮”是链接就保留href通过禁用态来控制不是链接就是按钮应该用button而不是在一张错误骨架上缝缝补补。这个问题想明白了后面所有写法的取舍都会清晰很多。1.3 禁用前必须想清楚的“边界条件”除了“链接还是按钮”另外两个边界条件也决定你选哪种实现键盘可达性和 SEO 语义。先说键盘。a不管有没有href它都是可以用键盘 Enter 键激活的有 href 时在 Tab 序里无 href 时编程式聚焦后 Enter 依然可以触发。你用 CSS 把鼠标点击禁掉了键盘用户按 Tab 到链接上按回车照样跳转。很多“禁用”方案都在这一点上翻车。再说爬虫和复制链接。搜索引擎会把href当作文档真实出链来抓取你写hrefjavascript:void(0)看起来页面里有一颗外链但抓下来是无效地址用户想转发你的页面时右键复制链接复制的也是那串丑陋的javascript:。这些都不是“能用就行”的性能问题而是实打实的可用性问题。所以禁用方案必须至少覆盖三层鼠标点击、键盘激活、辅助技术感知。少一层都会在某个角落出事故。2. 最常被踩坑的三种禁用写法#、javascript:void(0)与return false2.1href#return false第一代“经典坑”我入行那会儿几乎所有“禁跳转”代码都是这么写出来的a href# onclickreturn false;禁用链接/a它为什么能工作因为在浏览器的事件模型里onclick这个行内事件处理器如果返回false就等价于调用了event.preventDefault()浏览器随后检查这个事件没有被取消才会执行默认的导航或定位动作。所以return false实际上拦截的是“默认行为”。但它的副作用也相当直白。当用户点下这个链接时默认行为虽然被拦截了可如果哪一天事件监听链路上出了岔子、或者有一条脚本报错被截断了return false没执行到浏览器就会按照href#的本意去做两件事第一把当前页面滚到顶部因为#会被解析成一个空锚点第二往地址栏塞一个#或修改现有 hash。在普通页面里你顶多看到页面闪一下顶部这还能忍。可如果你在一个 hash 路由的单页应用里比如 Vue Router 的 hash 模式或老式 Backbone 路由这个#会被路由直接吞掉变成一次无意义的页面切换甚至误导航。我在项目里就遇到过线上页面突然跳到首页最后排查出来是一段第三方脚本在href#的链接上多绑了一个事件把return false给覆盖了。更不要提一个细节href#的链接在按住 Ctrl/Cmd 点击时浏览器会尝试在新标签页打开当前页 #这个行为同样不受onclickreturn false控制。你要禁的东西它反而在另一个入口放行了。2.2hrefjavascript:void(0)能用但副作用一个没少hrefjavascript:void(0)是比href#看起来“更干净”的写法因为它至少不会篡改地址栏也不会滚回顶部。void(0)的作用是让这个 JavaScript 表达式返回undefined这样浏览器不会拿一个返回值来替换当前文档。直接把href写成javascript:;也是一个意思只是更短。我可以负责任地说这个方案“能用”但它属于典型的“能用和好用之间差着十个量级”。第一个问题是 SEO 和出链语义。搜索引擎在提取页面链接时会读取href字段javascript:void(0)会被判定为无效出链。你可以看一下自己站点的数据所有用这种写法的内链在搜索引擎后台基本都处于“抓取异常”状态。第二个问题是用户复制链接。用户在手机上长按、在电脑上右键想复制这个链接复制的就是这串javascript:void(0)完全没意义。第三个问题比较隐蔽在启用了内容安全策略CSP的站里内联的javascript:协议地址可能直接被策略拦截导致这个 href 从一个“伪链接”变成一个彻底无效的链接。还有一件事我得单独提hrefjavascript:void(0)在中键点击或 Ctrl点击时浏览器有时会尝试在新标签页打开这段“伪地址”表现因浏览器而异但你已经完全没有控制权了。2.3onclickreturn false与addEventListener的行为差异可能有人会说前面那些坑我认但我把return false写在事件里总没问题吧这里又有一个常见的误解。return false只对行内onclick这种“内联事件处理器”有效。它起作用的底层原因是浏览器执行内联事件处理器时会对函数的返回值做一次判断false会被转成取消默认动作的信号。但addEventListener注册的回调函数返回值是没有人读的你写一百个return false也没有任何效果。// 这样写是无效的 document.querySelector(#link).addEventListener(click, function () { // 这里的 return false 不会阻止浏览器跳转 return false; }); // 必须显式调用 preventDefault document.querySelector(#link).addEventListener(click, function (event) { event.preventDefault(); });这个差异我见过太多人栽跟头页面用了现代的事件绑定方式但脑子里还停留在老一套 “return false” 的思路里结果链接永远拦不住。你要记住一件事用addEventListener就老老实实调preventDefault()用 jQuery 的话return false内部会被 jQuery 转成preventDefault stopPropagation但在原生 JavaScript 里没有这个待遇。顺带说一句当你调用了preventDefault之后event.defaultPrevented会变成true浏览器在触发默认行为之前会检查这个标志。某些 UI 框架比如 Vue 的事件修饰符.prevent本质上就是在做同一件事只是帮你在语法层包装好了。3. 从根上“禁”掉删除href、button替代与pointer-events的边界3.1 删除href彻底但要补可访问性的课回到第一节说的那个点没有href的a本来就不会跳转也没有定位行为。所以对“本来就不该是链接”的元素最干净的手段是删除href。a classmenu-item当前页所在项不可点击/a这个写法的好处是从根上杜绝了所有默认行为不会导航、不会改 hash、不会触发锚点定位、Ctrl点击也没用。但如果你的产品经理还要求它“长得像能点的”你需要手动补回视觉反馈a.menu-item { cursor: pointer; color: #1677ff; text-decoration: underline; }不过要特别小心可访问性。删掉href之后这个元素会从 Tab 焦点序列里消失键盘用户根本走不到它屏幕阅读器也不会把它当成链接来读用户不知道这里有个可点区域。所以如果你删了 href又希望它保持“可交互控件”的可用性通常要自己补角色和焦点a rolebutton tabindex0 classmenu-item aria-disabledtrue 正在加载中的菜单项 /a这样一来它在辅助技术里是“禁用状态的按钮”在键盘上可以被 Tab 聚焦虽然禁用态通常不建议聚焦更准确的做法是用tabindex-1保留编程式聚焦能力。注意rolebutton只是语义声明不会自动让它响应 Enter 键所以通常还得在键盘事件里补一个回车触发的逻辑。这里我不打算展开太多因为把a rolebutton的键盘一致性做完整代码量已经接近直接把标签换成button了。3.2 改用button语义上最“正确”的替代如果这个元素本来就是在“执行一个动作”比如展开菜单、打开弹窗、提交内容那正确写法是button而不是想尽办法让a看起来像按钮。按钮的天然语义就是“可点击、可触发动作”它没有href不存在“跳转页面的默认行为”更不存在“定位链接”这种说法。你要禁用它直接写原生disabled属性就行浏览器会顺带帮你处理掉鼠标事件和键盘事件屏幕阅读器也会自动读成“已禁用”。button typebutton disabled正在加载/button这里有一个魔鬼细节button如果不写type在表单里默认是submit点击会触发表单提交这等于换了一种突变方式“跳转”。所以我写按钮的第一习惯就是永远显式写typebutton。因为很多人把 a 标签替换成 button 之后发现页面一刷新、表单被提交了问题不在标签替换本身而是 type 默认值。不管使用哪种写法我都要专门提醒一个键盘层面的事情无论你用的是删除 href、rolebutton还是伪装的 button只要这个元素还保留在 Tab 序列里用户按 Enter 键都会触发合成点击事件。所以“禁用”状态绝不能只靠 CSS 或只靠语义必须让事件处理代码也感知到禁用态。3.3pointer-events: none只会禁掉半边天再来看一个非常流行的 CSS 禁用大招.is-disabled { pointer-events: none; cursor: not-allowed; opacity: 0.6; }pointer-events: none确实能在一瞬间把鼠标/触摸的点击事件全部屏蔽掉配合半透明和光标样式视觉上特别像“禁用”。但它有一个致命的边界它只对指针设备生效。键盘用户用 Tab 聚焦到这个链接再按回车浏览器依然会执行正常的跳转因为键盘激活走的是“合成点击事件”不受 CSS 控制。所以pointer-events: none只能作为“视觉禁用 鼠标禁用”这一层绝不能当作完整的禁用方案。完整的组合是a href/somewhere classis-disabled tabindex-1 aria-disabledtrue >a.is-disabled, a.is-disabled:link, a.is-disabled:visited { pointer-events: none; cursor: not-allowed; opacity: 0.6; }tabindex-1把链接移出 Tab 序列键盘到不了aria-disabledtrue告诉屏幕阅读器“这是禁用的”>.is-disabled .tooltip-content { pointer-events: auto; }否则你会在某个深夜接到“为什么那个提示框死活点不动”的工单。4. 专治“定位链接”阻止锚点跳动又不丢功能的完整方案4.1 锚点定位到底触发了哪些默认行为现在来到标题里“定位链接”的部分。href#targetId这种写法浏览器会做三件事在当前文档中查找idtargetId或nametargetId的元素将该元素滚动到浏览器视口内默认是瞬间定位到顶部把#targetId写入地址栏并触发一次hashchange事件如果 hash 有变化。你要“禁用定位链接”必须先想清楚要废掉哪一步。如果你只希望它不瞬间滚动而地址栏的 hash 保留不保留、hashchange触发不触发都是可以拆开的。很多人一刀把preventDefault()写上滚动没了hash 也没了看起来“禁用成功”实际上把“跳转到评论区”这个功能整个废掉了用户点击后没有发生任何事这是典型的过度禁用。4.2 拦截默认滚动并换成自定义平滑定位最常见的诉求是保留“点击后跳到目标位置”的功能但不要应用浏览器默认的瞬间定位而是自己想要平滑滚动。这种情况下不要禁用整个锚点功能只需要在点击时取消默认行为然后手动滚动到目标元素a href#comments classjs-smooth-anchor跳到评论区/adocument.querySelectorAll(.js-smooth-anchor).forEach(function (link) { link.addEventListener(click, function (event) { var href this.getAttribute(href); if (!href || href.charAt(0) ! #) return; var target document.getElementById(href.slice(1)); if (!target) return; event.preventDefault(); if (typeof target.scrollIntoView function) { target.scrollIntoView({ behavior: smooth, block: start }); } else { // 老旧浏览器兜底 target.scrollIntoView(true); } }); });这段代码的精髓在于preventDefault的位置先解析并找到目标元素确认目标存在才去禁用默认行为。如果目标不存在直接放行让浏览器自己处理用户不至于点了没反应。我见过很多人把preventDefault()无条件写在第一行结果目标 id 写错了也毫无提示链接变成死链。还有一个容易被忽略的细节scrollIntoView滚动的是“所有能够滚动的祖先容器”不是只滚 window。如果目标元素在某个overflow: auto的局部容器里scrollIntoView会把那个容器也一起滚到位这比手动计算offsetTop要省事得多。但如果你的需求是只滚主窗口、不滚内层容器就得自己用getBoundingClientRect()计算位置再设置对应容器的scrollTop。两个方案的取舍很简单局部容器是用户预期的滚动主体用scrollIntoView必须从页面级坐标计算用getBoundingClientRect。4.3 只改hash但不滚动的“伪定位”另一种情况更反直觉我希望点击链接后地址栏变成#comments但页面完全不要滚动到评论区。典型场景是“分享当前模块给朋友”的复制链接按钮你想让链接里带上位置信息又不想打扰用户当前的阅读位置。这时候不能简单preventDefault因为preventDefault会把 hash 的修改一起取消掉。正确做法是取消默认行为之后手动用history.pushState或history.replaceState修改 URL 状态link.addEventListener(click, function (event) { var hash this.getAttribute(href); // 例如 #comments event.preventDefault(); history.replaceState(null, , hash); });replaceState和pushState的区别在于前者不会在浏览历史里新增记录用户按后退不会回到上一个 hash后者会新增一条历史。绝大多数“只想改地址栏、不想跳动”的场景我推荐用replaceState因为它更像“原地更新状态”不会扰乱用户的前进后退预期。这里同样有个细节history.pushState修改 hash 时不会触发hashchange事件也不会引发滚动。如果你依赖hashchange去做一些统计或者状态同步需要手动派发一个自定义事件或者直接调用你自己的状态回调。反过来如果你确实希望hashchange触发但不想滚动可以先preventDefault再手动location.hash hash不过这样会让页面产生一条历史记录两种做法按需取舍。4.4 在Vue/React中禁用“定位链接”的注意点框架环境下“定位链接”往往不是单纯的href#id而是被路由系统劫持的。比如 Vue Router 的 hash 模式会把href#/path当作路由地址React 里你可能用了Link to/path这种封装组件。这时“禁用跳转”要分两层一是组件层语义禁用二是事件层拦截。Vue 写法里我见过最干净的处理是给router-link加一个自定义 class通过点击事件阻止默认行为并且不让路由接管router-link to/detail classis-disabled >function onDisabledClick(event) { if (event.currentTarget.dataset.disabled ! true) return; // 这里已经由 .prevent 阻止了默认行为只需做提示 console.log(该入口暂不可用); }需要注意的是Vue 路由的跳转通常被绑定在更外层的根节点上光靠click.prevent能不能彻底拦住取决于路由库的监听方式。多数情况下.prevent足够因为它直接禁止合成点击的默认动作如果遇到路由还是要跳再考虑在事件回调里临时加event.stopPropagation()。但stopPropagation是双刃剑——你可能会把父级其他合法事件的传播也一起扼杀所以只能当作最后手段。React 里类似Link的onClick里调用preventDefaultLink to/detail onClick{(event) { if (disabled) { event.preventDefault(); } }} 详情 /Link但 React 的Link默认渲染成a如果你给了一个disabledprop不少 UI 库并不会真的禁止键盘操作最后还是得靠tabIndex{-1}和aria-disabled收尾。换句话说框架帮你封装了跳转逻辑却没帮你封装禁用逻辑这块始终是自己的事。5. 把禁用逻辑封装成工具三个实战场景一起解决5.1 一个始终可用的“安全禁用”工具函数鉴于上面提到的坑我在实际项目里会封装一个“安全禁用处理器”核心逻辑就是一句话任何形式触发的点击只要元素处于禁用态就无条件取消默认行为并且阻止它冒泡到不该冒泡的地方。它不用管这个 a 标签是普通链接、锚点定位还是框架路由链接只要>function bindSafeDisabled(root document) { root.addEventListener(click, function (event) { var disabledTarget event.target.closest(a[data-disabledtrue], button[data-disabledtrue]); if (!disabledTarget) return; // 取消跳转/定位/表单提交等默认行为 event.preventDefault(); // 可选阻止事件继续冒泡避免路由库在父级捕获后触发跳转 // 注意除非明确知道会影响什么否则不建议无条件使用 // event.stopPropagation(); }); } bindSafeDisabled();我特意用了事件委托而不是给每个链接单独绑定原因有两个第一动态渲染出来的链接不需要重新绑事件第二禁用状态经常会变委托模式只需要读取 DOM 上的>a href/orders/list classnav-link >a href/step2 idnextStepLink 下一步 /adocument.getElementById(nextStepLink).addEventListener(click, function (event) { var form document.getElementById(step1Form); if (typeof form.reportValidity function !form.reportValidity()) { event.preventDefault(); // 浏览器已经自动提示第一个非法字段这里只需记录日志或统计 console.log(表单校验未通过跳转已被拦截); } });reportValidity()是原生表单校验 API它会触发浏览器内置的“请填写该字段”气泡提示同时把焦点移到第一个不合法的输入项。比手动收集错误信息再setCustomValidity要省心得多主流浏览器都支持。要注意的是如果表单里的某个字段是自定义组件比如日期选择器、富文本编辑器原生校验覆盖不到你得在点击回调里跑自己那套校验逻辑再把event.preventDefault()挂上。5.4 场景三防止重复点击造成重复提交a 标签没有原生disabled所以在“提交后防二次点击”的场景里很多人会临时用pointer-events: none硬禁。但双击产生两次点击事件的速度比 CSS 重绘还要快pointer-events未必来得及生效。我在实战中更信得过状态锁var isSubmitting false; submitLink.addEventListener(click, function (event) { if (isSubmitting) { event.preventDefault(); return; } isSubmitting true; this.setAttribute(data-disabled, true); this.classList.add(is-submitting); this.setAttribute(aria-disabled, true); this.setAttribute(tabindex, -1); doRealSubmit() .catch(function () { // 失败时恢复可点状态 isSubmitting false; submitLink.removeAttribute(data-disabled); submitLink.classList.remove(is-submitting); submitLink.removeAttribute(aria-disabled); submitLink.setAttribute(tabindex, 0); }); });别忘了isSubmitting在失败之后的恢复逻辑。很多人把状态锁写死了接口报错后链接依然是禁用态用户连重试的机会都没有。恢复动作里记得把tabindex一并改回0否则键盘用户永远到不了这个链接。6. 方案对照与我的落地习惯6.1 常用禁用方案速查表我把做技术评审时最常用的一张对照表留在这里新同学可以把它存着方案鼠标点击键盘激活地址栏影响语义/无障碍适用场景href#return false可拦截不稳妥可能加空hash差不建议使用hrefjavascript:void(0)可拦截不稳妥无差SEO受损不建议使用删除href不触发无法聚焦无中性需补角色本来就不是链接pointer-events: none屏蔽不屏蔽无缺失仅作视觉/鼠标层tabindex-1aria-disabled JS拦截可拦截不可聚焦无良好推荐组合原生button disabled屏蔽屏蔽无正确非导航动作这张表的核心结论是没有一种方案能靠单一手段覆盖所有入口。真正稳妥的“禁用”从来是组合拳CSS 管视觉和指针tabindex管键盘焦点aria-disabled管辅助技术JS 永远做最后一道司法拦截。6.2 我最常用的“决策链路”与踩坑记忆最后分享一条我从无数次返工里总结出来的决策链路也是我现在每次写相关代码前都要过一遍的内心 OS。第一步问自己它是不是链接如果它只是执行动作直接换button没有任何后续烦恼。第二步如果是链接这个链接在“禁用态”之外还有没有真实的可用场景有就保留真href维护一套禁用态没有说明它在产品逻辑里本来就不是跳转入口请回到第一步。第三步禁用态必须同时处理鼠标、键盘、辅助技术三层每一层都不能缺席。第四步如果你的链接涉及锚点定位先搞清楚你要禁的是“滚动”还是“hash 变更”两者可以分开控制。说到踩坑记忆有两次教训我特别想提。第一次是把pointer-events: none加在一个父级菜单容器上结果子菜单的 tooltip 怎么都点不到排了一下午队才发现是继承生效最后在子元素上补了pointer-events: auto才解决。第二次是在 Vue Router 的 hash 模式下用href#做了一个“返回顶部”的占位链接上线后用户每次点它都会从当前详情页弹回列表页因为路由库把那个#当作了一次路由变化。那次之后我再也不在单页应用里使用任何裸href#。说白了“禁用 a 标签跳转页面或定位链接”从来就不是一行代码的事它是一个需要你同时理解 HTML 默认行为、CSS 边界、键盘事件模型和语义化的小系统工程。把这几层想清楚再去写代码你会发现那些“为什么禁不掉”的诡异 bug大部分都能提前死在设计阶段。