禁用 JavaScript 中的链接
-
将
href
设置为不同的函数以禁用 JavaScript 中的链接 -
使用
addEventListener()
方法禁用 JavaScript 中的链接 -
使用
name
属性禁用 JavaScript 中的链接 - 使用 jQuery 禁用 JavaScript 中的链接
JavaScript 约定添加了一种更有效的方法来禁用锚标记 href
。通常,我们可以设置 href="#"
以确保链接不会路由到任何地址。
此外,还有 JavaScript 函数方法来定义空分配,例如 href="javascript:void(0)"
。同样,我们也可以声明 href="javascript://"
,这意味着该值为 null。
在接下来的部分中,我们将看到我们如何在没有 JavaScript 的情况下实现禁用链接,并使用更有意义的 JavaScript 实现有效的方法。我们将使用 addEventListener()
方法、name
属性和禁用已定义链接的 jQuery 方法。
将 href
设置为不同的函数以禁用 JavaScript 中的链接
在这里,我们将仅通过设置 href
以获取空值来禁用链接。这不是暗示该概念的最佳方式,因为你经常需要更改启用和禁用链接。
因此,保持 href
始终为空需要在每次修改中对链接进行硬编码。
<html>
<head>
<title>Disable link</title>
</head>
<body>
<p>Disable link</p>
<a href="javascript://" id="home">Youtube</a><br>
<a href="javascript:void(0)" id="home">Google</a><br>
<a href="#" id="home">Git</a><br>
</body>
</html>
输出:
javascript://
、javascript:void(0)
和 #
评估 href
以得到 null 或未定义的结果。因此,我们得到了一个禁用的链接,但有一些方法可以更好地执行此任务。
使用 addEventListener()
方法禁用 JavaScript 中的链接
我们将有一个锚标签,其中链接了 Google 的主页。如果我们希望禁用链接,我们将在 JavaScript 部分手动定义一些条件。
这将使更改的路径更容易。因此,每次单击链接时都会触发 eventListener()
。
该功能将阻止单击链接时的默认活动,即路由到链接的实际页面。
<html>
<head>
<title>Disable Link using JavaScript</title>
</head>
<body>
<p>Disabled Link using JavaScript</p>
<a href='https://www.google.com/' id='home' target='blank'>Google</a>
</body>
<script>
var link = document.getElementById('home');
document.addEventListener('click', function (e) {
if (e.target.id === link.id) {
e.preventDefault();
}
});
</script>
</html>
输出:
使用 name
属性禁用 JavaScript 中的链接
在本例中,我们将关注 name
属性。基本任务是启用 eventListener()
,但这次的条件检查将使用 name
属性。
如你所见,评论 e.preventDefault();
将导致路由到实际站点。因此,这是通过设置 preventDefault
来禁用链接的一种方法。
<html>
<head>
<title>Disable Link using JavaScript</title>
</head>
<body>
<p>Disabled Link using JavaScript</p>
<a href='https://github.com/' target='blank' name="git">GitHub</a>
</body>
<script>
document.addEventListener('click', function (e) {
if (e.target.name === 'git') {
e.preventDefault();
}
});
</script>
</html>
输出:
使用 jQuery 禁用 JavaScript 中的链接
jQuery 执行的任务与我们已经检查过的任务没有什么不同。但是语法有点不同。
在这里,我们不会使用 preventDefault()
方法。相反,每次点击链接时我们都会返回一个布尔值 false
。
这将连续禁用预定链接。
<html>
<head>
<title>Disable link using jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<p> Disabled link using jQuery</p>
<a href="https://www.youtube.com/" id="home" target="blank">Youtube</a>
</body>
<script>
$(document).ready(function () {
$('#home').click(function () {
return false;
});
});
</script>
</html>
输出: