迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

Href # 与 JavaScript 无效

作者:迹忆客 最近更新:2024/03/20 浏览次数:

本文将解释何时在 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>

输出:

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

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

JavaScript 中的 Map 索引

发布时间:2024/03/20 浏览次数:197 分类:JavaScript

JavaScript map 方法很容易实现,我们将讨论它的不同参数,以及它们在不同场景中的使用方式。

JavaScript 指针

发布时间:2024/03/20 浏览次数:166 分类:JavaScript

JavaScript 没有明确的方法来定义指针。它允许在对象之间传递值和引用,但不能显示引用。本文将介绍在 JavaScript 中定义指针的好方法。

JavaScript 元组示例

发布时间:2024/03/20 浏览次数:166 分类:JavaScript

在 JavaScript 语言中,元组是具有不可变特性的数组类型。我们可以使用单个变量访问元组,该变量是数组的一种。

JavaScript 右键菜单

发布时间:2024/03/20 浏览次数:123 分类:JavaScript

本文展示了如何在 JavaScript 中向网页添加自定义右键菜单。

使用 JavaScript 编码 HTML

发布时间:2024/03/20 浏览次数:83 分类:JavaScript

本教程将教你如何使用不同的方法对 HTML 字符串进行编码。这些方法的共同点是字符串替换,它替换了具有潜在危险的字符。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便