在前端中，＜a＞标签的 href=“javascript:；“ 这个是什么意思

在前端中a标签里填这个是什么意思

在前端中，<a> 标签的 href="javascript:;" 是一种常见的空链接 / 占位写法 ，核心作用是让 <a> 标签保持可点击的样式（如鼠标悬浮显示手型），但点击后不触发默认的页面跳转 / 刷新行为，同时为后续绑定自定义点击事件预留空间。

拆解说明

1. `javascript:` 伪协议

javascript: 是浏览器支持的URL 伪协议，表示后续内容是需要执行的 JavaScript 代码。

若写 href="javascript:alert('hello')"，点击链接会执行 alert 弹窗；
若写 href="javascript:;"，; 是 JavaScript 中的 "空语句"（无任何执行逻辑），因此点击后无任何默认行为（不会跳转、不会刷新、不会锚点定位）。

2. 为什么不用 `href="#"`？

很多人会误以为 href="#" 是等价写法，但两者有关键区别：

写法	点击后行为	适用场景
`href="javascript:;"`	无任何默认行为，页面不滚动、URL 不变化	纯自定义点击逻辑（如按钮式链接）
`href="#"`	跳转到页面顶部（锚点定位），URL 末尾追加 `#`	临时占位，但需额外阻止默认行为

如果用 href="#"，若未通过 JS 阻止默认事件，点击后页面会滚动到顶部，这通常是不符合预期的；而 javascript:; 从根源避免了这个问题。

3. 典型使用场景

html

预览

复制代码

<!-- 示例：点击链接触发自定义JS逻辑，无默认跳转 -->
<a href="javascript:;" id="btn">点击执行操作</a>

<script>
  document.getElementById('btn').addEventListener('click', function() {
    // 自定义逻辑：如发送请求、显示弹窗、修改DOM等
    console.log('点击了链接，执行自定义操作');
  });
</script>

现代前端的替代方案

虽然 javascript:; 兼容所有浏览器，但从语义化和可访问性角度，更推荐以下写法：

若本质是 "按钮" ：直接用 <button> 标签（样式可通过 CSS 调整为链接样式），无需 hack href；
若必须用 <a> ：
- 设 href="" + 阻止默认事件（但空 href 会刷新页面，需配合 e.preventDefault()）；
- 设 href="javascript:void(0)"（void(0) 等价于空语句，效果和 javascript:; 一致，更易读）。

总结

href="javascript:;" 的核心价值是：

让 <a> 标签保持 "可点击链接" 的视觉 / 交互特性（手型光标）；
完全禁用 <a> 标签的默认跳转行为；
为后续绑定自定义点击事件提供干净的基础，是前端历史中兼容所有浏览器的 "空链接" 经典写法。

在前端中，＜a＞ 标签的 href=“javascript:；“ 这个是什么意思