Href # 与 JavaScript 无效

Habdul Hazeez 2023年1月30日 2022年5月5日
  1. 何时对 JavaScript 链接使用 Href #
  2. 何时对 JavaScript 链接使用 Href javascript:void(0)
  3. 一种更好的方法来处理 JavaScript 中的 Href #javascript:void()
  4. 结论
Href # 与 JavaScript 无效

本文将解释何时在 href 中对 JavaScript 链接使用 #javascript:void(0)。因此,你将能够更好地决定哪一个最适合你的用例。

在本文的最后,我们将解释一种更好的使用 JavaScript 链接的方法。

何时对 JavaScript 链接使用 Href #

如果你执行以下操作,你可以将 href # 用于 JavaScript 链接。

  1. onclick 事件处理程序中的 Return false
  2. 确保 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>

输出:

不返回 false 的 Onclick 事件

你可以通过在 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>

输出:

返回 false 的 Onclick 事件

在 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>

输出:

出现错误的 Onclick 事件

何时对 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 无效且没有错误

注意
如果函数出现错误,根本不会执行,也不会跳转到页面顶部。

一种更好的方法来处理 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 avatar Habdul Hazeez avatar

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

相关文章 - JavaScript Href