禁用 JavaScript 中的链接

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

Vue React JavaScript Angular CSS HTML

禁用 JavaScript 中的链接

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

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>

输出：

上一篇：JavaScript 漂亮打印 JSON

下一篇：使用 .forEach() 迭代 JavaScript 中的元素

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

本文地址：

迹忆客专注技术分享