Href # 与 JavaScript 无效
-
何时对 JavaScript 链接使用
Href# -
何时对 JavaScript 链接使用
Hrefjavascript:void(0) -
一种更好的方法来处理 JavaScript 中的
Href#和javascript:void() - 结论
本文将解释何时在 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 链接。
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn