企业官网建设流程全解析

做后台管理系统或者官网的时候，几乎每个前端都遇到过这种破事：产品经理跟你说“这个菜单先不跳转，点一下要弹登录框”“这个链接是给用户看的，点了先别动，我后面要接埋点”“这几个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 占位”，我建议直接用href="javascript:void(0)"都比href="#"强一档，但它也不是最优解，原因下面说。尽量记住：别再用#做空链接占位了，哪怕加个注释说“这里不跳转”，也比默默跳回顶部强。

2.2 href="javascript:void(0)"：能用但不推荐的理由

老代码里很常见：

<a href="javascript:void(0)" onclick="openLayer()">点击弹窗</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" class="js-need-login">查看详情</a>

const 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" onclick="return false">查看详情</a>

或者：

<a href="/detail/123" onclick="return 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="#" onclick="return 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.prevent="openDetail">查看详情</a>

React：

<a href="/detail/123" onClick={(e) => { e.preventDefault(); openDetail(); }}>查看详情</a>

.prevent修饰符就是preventDefault的语法糖，效果一样的。这条经验送给被原生 DOM 折磨完又进框架的同学：别再用href="#" onlick="return 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. 方案对比与选型建议：别一上来就上 JS

5.1 几种方案横向对比表，照着选就行

我把自己常用方案整理成了一张表，你可以直接对照场景选择：

link.setAttribute('aria-disabled', 'true'); link.setAttribute('tabindex', '-1');