Href # 与 JavaScript 无效
本文将解释何时在 href 中对 JavaScript 链接使用 # 和 javascript:void(0)。因此，你将能够更好地决定哪一个最适合你的用例。
在本文的最后，我们将解释一种更好的使用 JavaScript 链接的方法。
何时对 JavaScript 链接使用 Href #
如果你执行以下操作，你可以将 href # 用于 JavaScript 链接。
onclick事件处理程序中的Return false。- 确保
onclick调用的函数没有错误。
JavaScript 中的 Onclick 事件处理程序中的 Return False
如果 onclick 中没有 return false 声明，链接会将用户带到页面顶部。这发生在 onclick 中的函数执行之后。
在下面的代码中，我们有一个 HTML 链接，其 href 值设置为 #。同时，链接有一个调用 clickMe 函数的 onclick 事件属性。
当你单击链接以执行 clickMe 功能时，代码将运行。但是，之后页面会跳转到顶部。
<body>
<main style="font-size: 5em;">
<p>This is a large dummy text.</p>
<a href="#" onclick="clickMe();">Run some JS code.</a>
</main>
<script type="text/javascript">
function clickMe() {
alert("You clicked me");
}
</script>
</body>
输出：
你可以通过在 onclick 事件属性中写入 return false 来修复此行为。因此，函数执行后，链接不会跳转到页面顶部。
以下是更新后的代码。
<body>
<main style="font-size: 5em;">
<p>This is a large dummy text.</p>
<a href="#" onclick="clickMe(); return false;">Run some JS code.</a>
</main>
<script type="text/javascript">
function clickMe() {
alert("You clicked me");
}
</script>
</body>
输出：
在 JavaScript 中确保 Onclick 调用的函数中没有错误
如果 onclick 事件属性中的函数包含错误，它将不会执行。结果，链接将跳转到页面顶部。
如果在 onclick 中有 return false 语句，也会发生这种情况，但调用的函数中有错误。
在下面的代码中，我们在 clickMe 函数中引入了一个不存在的变量。因此，当你单击链接时，该功能将不会执行；相反，该链接会将用户带到页面顶部。
那是因为不存在的变量会导致 ReferenceError。
<body>
<main style="font-size: 5em;">
<p>This is a large dummy text.</p>
<a href="#" onclick="clickMe(); return false;">Run some JS code.</a>
</main>
<script type="text/javascript">
function clickMe() {
// We've introduced an undefined variable, so, this will lead to a reference error
alert("You clicked me" + t);
}
</script>
</body>
输出：
何时对 JavaScript 链接使用 Href javascript:void(0)
如果由于限制而不想使用 #，你可以对 JavaScript 链接使用 javascript:void(0)。但是，javascript:void(0) 违反了启用 CSP 的 HTTPS 页面上的内容安全策略。
同时，使用 javascript:void(0)，你不需要 onclick 事件属性中的 return false。因此，该链接不会在函数执行后将用户移动到页面顶部。
在下面的代码中，我们使用 javascript:void(0) 作为 href 的值。运行代码时，你会观察到链接在函数执行后没有跳转到页面顶部。
<main style="font-size: 5em;">
<p>This is a large dummy text.</p>
<a href="JavaScript:Void(0)";" onclick="clickMe();">Run some JS code.</a>
</main>
<script type="text/javascript">
function clickMe() {
alert("You clicked me");
}
</script>
输出：
一种更好的方法来处理 JavaScript 中的 Href # 和 javascript:void()
当你发现自己想要在 href 中使用 # 或 javascript:void(0) 时，最好使用 HTML 按钮。这是因为链接应该将你导航到某个位置，而不是触发一些 JavaScript 代码。
此外，使用按钮无需将其 href 属性设置为 # 或 javascript:void(0) 的链接。更重要的是，你可以使按钮看起来像一个带有少量 CSS 的 HTML 链接。
我们将 HTML 按钮的样式设置为类似于以下代码中的链接。此外，我们还通过 JavaScript 附加了一个点击事件。
因此，当你单击链接时，你将看到一个 JavaScript 警报窗口。
<head>
<style type="text/css">
.btn-link {
cursor: pointer;
color: #00f;
padding: 0;
border: 0;
font: inherit;
text-decoration: underline;
background-color: transparent;
}
</style>
</head>
<body>
<main style="font-size: 2em;">
<p>This button looks like a <button type="button" class="btn-link">link.</button></p>
</main>
<script type="text/javascript">
let allBtn = document.querySelectorAll('.btn-link');
for (let btnLink of allBtn) {
btnLink.addEventListener('click', function() {
alert("You clicked me");
}, false);
}
</script>
</body>
输出：
结论
由于不需要的导航，你应该支持 javascript:void(0) 而不是 #。当 onclick 中没有 return false 时，会发生不需要的导航。
或者，你可以使用一个按钮，使其看起来像一个 HTML 链接。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间：2024/03/24 浏览次数：102 分类：JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间：2024/03/24 浏览次数：180 分类：JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。
