禁用 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>
输出：
-Method-to-Disable-Links.webp)
使用 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>
输出：
