<a href="javascript:;"> 中的 javascript:; 是什么？
简单来说：javascript:; 是 一种伪协议（pseudo-protocol），写在 <a> 标签的 href 属性里时，表示“点击这个链接时执行 JavaScript 代码，但不跳转页面”。
javascript:是协议头（scheme），告诉浏览器后面跟着的是 JavaScript 代码。;是 JavaScript 的空语句（相当于什么都不做）。
所以 <a href="javascript:;"> 的实际效果是：
- 点击后 不跳转、不刷新页面、不改变 URL。
- 浏览器会尝试执行后面的 JavaScript 代码（这里是空语句，所以什么都不执行）。
- 链接外观和行为像普通
<a>（有下划线、手型光标、可右键打开新标签等）。
常见的几种写法对比（2026 年现状）
| 写法 | 实际效果 | 页面是否跳转/刷新 | 是否滚动到顶部 | 推荐程度（2026） | 主要问题 |
|---|---|---|---|---|---|
href="javascript:;" | 执行空语句，什么都不做 | 不 | 不 | ★★☆☆☆ | 可读性差，部分安全策略可能限制 |
href="javascript:void(0);" | 执行 void(0) → 返回 undefined | 不 | 不 | ★★★☆☆ | 经典写法，但不推荐（见下文） |
href="#" | 跳转到当前页面顶部（# 代表页面锚点） | 不刷新，但滚动 | 是（到顶部） | ★☆☆☆☆ | 会导致页面跳动，用户体验差 |
href="" 或 href 省略 | 刷新当前页面（相对路径为空） | 刷新 | — | ☆☆☆☆☆ | 最差，几乎不用 |
推荐替代：不写 href，用 JS 事件 | 用 onclick / addEventListener 处理点击 | 不 | 不 | ★★★★★ | 最佳实践 |
为什么很多人用 javascript:; 或 javascript:void(0);？
早期（尤其是 jQuery 时代）开发者常用这种方式“伪装成链接的按钮”：
- 需要
<a>的默认样式（下划线 + 手型光标）。 - 需要支持右键“在新标签打开”、键盘 Tab 聚焦等原生行为。
- 又不想让点击真的跳转页面。
于是就把 href 写成 javascript:; 或 javascript:void(0);，再配合 onclick="doSomething(); return false;" 来阻止默认行为。
示例（老式写法）：
<a href="javascript:;" onclick="alert('点击了！'); return false;">
点击我（什么都不跳转）
</a>2026 年强烈不推荐这种写法（MDN、W3C、现代最佳实践）
现代前端强烈反对在 href 中使用 javascript: 方案，主要原因：
- 安全性风险（XSS 隐患）
javascript:协议容易被注入恶意代码，尤其在动态生成链接时（比如从 URL 参数拼接）。 - 可访问性（Accessibility）差
屏幕阅读器会把这种链接读成“可点击链接”，但用户不知道会发生什么；键盘用户期望链接是导航而不是动作。 - 语义不正确
<a>的本意是超链接（hyper link），不是按钮。
如果是执行动作（如打开弹窗、提交表单、切换 tab），应该用<button>。 - 浏览器行为不一致
有些浏览器/扩展/内容安全策略（CSP）会限制或警告javascript:URL。
现代正确写法（推荐）
1. 纯动作 → 用 <button>（首选）
<button type="button" onclick="openModal()">打开弹窗</button>
<!-- 或更现代 -->
<button type="button" id="btn">打开弹窗</button>
<script>
document.getElementById('btn').addEventListener('click', openModal);
</script>- 语义正确
- 无需伪造 href
- 支持 disabled 状态、form 关联等
2. 需要链接外观但实际是动作 → 用 <a role="button"> + 阻止默认
<a href="#" role="button" tabindex="0"
onclick="openModal(); return false;"
onkeydown="if(event.key === 'Enter') openModal();">
打开弹窗（伪链接）
</a>- 更好可访问性（role + tabindex）
- 仍用
#但通过return false阻止跳转
3. Vue/React 等框架中
直接用 @click 或 onClick，根本不写 href：
<!-- Vue -->
<a @click="handleClick" class="link-like">点击我</a>
<!-- React -->
<a href="#" onClick={(e) => { e.preventDefault(); handleClick(); }} className="link-like">
点击我
</a>总结（一句话记住）
javascript:;= “点击时执行 JS，但啥都不做，也不跳转”- 它曾经是常见 hack，但 2026 年已被视为反模式
- 现代做法：动作用
<button>，导航才用带真实href的<a>
如果你在某个具体场景（比如弹窗、tab 切换、复制文本）看到这种写法，告诉我，我可以帮你改成更现代的实现方式！
