在前端中，＜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="#"，若未通过 JS 阻止默认事件，点击后页面会滚动到顶部，这通常是不符合预期的；而javascript:;从根源避免了这个问题。

3. 典型使用场景

html

预览

<!-- 示例：点击链接触发自定义JS逻辑，无默认跳转 --> <a href="javascript:;" id="btn">点击执行操作</a> <script> document.getElementById('btn').addEventListener('click', function() { // 自定义逻辑：如发送请求、显示弹窗、修改DOM等 console.log('点击了链接，执行自定义操作'); }); </script>

现代前端的替代方案

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

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

总结

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

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