在 HTML 中如何让 <a> 标签不跳转、只执行 JS？

当前位置：点晴教程→知识管理交流 →『技术文档交流』

freeflydom

2026年7月3日 9:33 本文热度 165

：在 HTML 中如何让 a 标签不跳转、只执行 JS？

在 HTML 中让 <a> 标签不跳转、只执行 JS，有几种常用方法，各有优劣：

方法一：`href="javascript:void(0)"`（推荐）

html

<a href="javascript:void(0)" onclick="myFunction()">点击执行JS</a>

或简写为：

html

<a href="javascript:;" onclick="myFunction()">点击执行JS</a>

优点：不会滚动到页面顶部，不会在 URL 添加 #，兼容性好。
缺点：href 中写 javascript: 略显"非语义化"，但实际是业界常用做法。

方法二：`href="#"` + `return false` 或 `preventDefault()`

html

<a href="#" onclick="myFunction(); return false;">点击执行JS</a>

或使用事件对象：

html

<a href="#" onclick="myFunction(event)">点击执行JS</a>
<script>
function myFunction(e) {
    e.preventDefault(); // 阻止默认跳转
    // 你的逻辑代码
}
</script>

注意：href="#" 会让页面滚动到顶部，必须用 return false 或 preventDefault() 阻止默认行为。

方法三：使用 `<button>` 替代 `<a>`（语义化最佳）

如果不需要链接的语义（如 SEO、右键新窗口打开等），直接用 <button> 更合适：

html

<button onclick="myFunction()">点击执行JS</button>

优点：语义清晰，无跳转副作用，无需额外阻止。
缺点：没有链接的样式和交互特性（如鼠标手型、下划线等），但可通过 CSS 还原。

方法四：完全移除 `href`（不推荐）

html

<a onclick="myFunction()">点击执行JS</a>

缺点：没有 href 的 <a> 在语义上不完整，且鼠标指针不会变成手型（需额外 CSS cursor:pointer），键盘 Tab 聚焦后按回车也无法触发（需额外处理），不推荐。

最佳实践建议

场景	推荐方式
需要链接样式/交互，且需阻止跳转	`href="javascript:void(0)"` + `onclick`
仅作为可点击按钮，无链接语义	直接用 `<button>`
需保留链接的 SEO 或可访问性	`href="真实URL"` + 在 `onclick` 中判断是否执行跳转

完整示例

html

<!DOCTYPE html>
<html>
<head>
    <style>
        a { cursor: pointer; }
    </style>
</head>
<body>
    <!-- 方式一：最常用 -->
    <a href="javascript:void(0)" onclick="sayHello()">点我（void）</a>
    <!-- 方式二：用 # 并阻止默认 -->
    <a href="#" onclick="sayHello(); return false;">点我（#）</a>
    <!-- 方式三：用 button（语义最佳） -->
    <button onclick="sayHello()">点我（button）</button>
    <script>
        function sayHello() {
            alert('Hello! 页面没有跳转');
        }
    </script>
</body>
</html>