禁用 JavaScript 中的链接

Anika Tabassum Era 2023年1月30日 2022年5月10日
  1. href 设置为不同的函数以禁用 JavaScript 中的链接
  2. 使用 addEventListener() 方法禁用 JavaScript 中的链接
  3. 使用 name 属性禁用 JavaScript 中的链接
  4. 使用 jQuery 禁用 JavaScript 中的链接
禁用 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>

输出:

通过将 href 设置为不同的函数来禁用链接

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>

输出:

使用 addEventListener() 方法禁用链接

使用 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>

输出:

使用 jQuery 禁用链接

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook