如何在JavaScript中禁用a href链接？

Question

我有一个标签<a href="#"> Previous </a> 1 2 3 4 <a href="#"> Next </a>，在某些情况下，我希望完全禁用此标签。

评论中的代码（这是该链接如何生成的）

if (n_index != n_pages) 
    a = a+'<li><a href="#" onclick="javascript:paginateAjaxPage('+(n_index+1) +','+stype+');">></a></li><li><a href="#" onclick="javascript:paginateAjaxPage('+n_pages+','+stype+');" >>></a></li>'; 
else 
    a = a+'<li><a style="cursor: pointer;" onclick="return false;">></a></li><li><a style="cursor: pointer;" onclick="return false" >>></a></li>'; 
a = a+'</ul></div>';

- Warrior

---

在某些情况下，我希望完全禁用此标签：这是什么意思？有哪些条件？ - Felix Kling

您的意思是将文本禁用，但仍希望它以链接形式显示（包括下划线等），但在单击时不执行任何操作？ - Shadow The Spring Wizard

可能是重复的问题：如何使锚链接不可点击或禁用？ - IsmailS

Answer 1

当您不希望用户在单击时重定向时，请尝试此方法

<a href="javascript: void(0)">I am a useless link</a>

- Pranay Rana

---

这句话的意思是“如何使用 '<a href='javascript:;'>我是一个短而无用的链接</a>'？”请注意，这是一段HTML代码，其中包含一个超链接标签和一些JavaScript代码。 - Charlie Schliesser

不需要分号。 - mVChr

你们网页开发人员在代码中加入了大量的制表符\t、换行符\n和空格，仅仅是为了让代码看起来漂亮整齐（但对谁来说呢？浏览器），现在却为了 7 个字节的 void(0) 和/或分号 ; 愁眉苦脸，天哪。 - user2889419

我略微不同意上面的评论。有时候需要使用描述性语言，而其他情况下则需要更简单易记的语言。我更喜欢 "javascript："这个用法。 - Yasen

在我看来，“数百万个制表符\t、换行符\n和空格”可以使代码易于理解，而“void(0)”则不是。因此，这应该被删除或尽可能缩短。例如，在这里，更短的长度是为了理解（阅读）而不是为了“压缩”或字节经济。 :) - Cherry

Answer 2

您可以使用此样式类来停用页面中的所有链接：

将此类应用于包含链接的元素即可。

a {
    pointer-events:none;
}

现在当然的诀窍是仅在需要时停用链接，以下是如何操作：

使用一个空的A类，像这样：

a {}

如果你想要停用链接，那么请这样做：

    GetStyleClass('a').pointerEvents = "none"

    function GetStyleClass(className)
    {
       for (var i=0; i< document.styleSheets.length; i++) {
          var styleSheet = document.styleSheets[i]

          var rules = styleSheet.cssRules || styleSheet.rules

          for (var j=0; j<rules.length; j++) {
             var rule = rules[j]

             if (rule.selectorText === className) {
                return(rule.style)
             }
          }
       }

       return 0
    }

注意：某些浏览器将CSS规则名称转换为小写，而此代码区分大小写，因此最好使用小写类名

重新激活链接：

GetStyleClass('a').pointerEvents = ""

请查看此页面http://caniuse.com/pointer-events以获取有关浏览器兼容性的信息。

我认为这是最好的方法，但遗憾的是IE像往常一样不支持它:) 我还是发布了这个帖子，因为我认为其中包含的信息可能会有用，并且因为某些项目使用已知的浏览器，例如在移动设备上使用Web视图。

如果你只想禁用一个链接（我才意识到那就是问题），我会使用一个函数，手动根据条件设置当前页面的网址或不设置。 （就像你接受的解决方案）

这个问题比我想象中的要简单得多：）

- Pizzaiola Gorgonzola

---

感谢您使用 pointer-events:none; 这个标签，我之前不知道它的存在，它非常有用！ - Johnathan Brown

这很棒，但值得注意的是，在IE 11版本之前，不支持pointer-events属性。http://caniuse.com/#feat=pointer-events - JakeRobb

我在这个页面上尝试了一下，通过编辑全局样式，但是然后我就无法给你点赞了 :) - pllee

太棒了！没有使用jQuery，我花了很长时间才找到一种方法来实现这个。 - Hesam Khaki

pointer-events:none，最好的技巧！非常感谢。 - Jean-François

Answer 3

您可以简单地将其赋值为空哈希：

anchor.href = "#";

或者如果那不够好的话，使用事件处理程序来进行“禁用”：

anchor.href = "javascript:void(0)";

- tcooc

---

为什么不建议使用#作为链接？考虑一下这种情况，如果你的禁用链接出现在一个很长的页面的底部/页脚中，点击该链接将会返回页面顶部。使用"javascript:;"就足够了。 - Kumar

无法滚动回顶部。 - Jscti

如果以后添加了一个ID为1的元素，@Bixi将会滚动到该元素。 - ps2goat

嗯，这很明显。知道了就永远不要创建一个id=1。这只是一种可能的解决方法。 - Jscti

如果您的<base>与当前页面不同，则此方法将无法正常工作。 - pmiguelpinto

Answer 4

使用jQuery尝试一下：

$(function () {
    $('a.something').on("click", function (e) {
        e.preventDefault();
    });
});

- ValentinVoilean

Answer 5

MDN建议使用element.removeAttribute(attrName);来禁用属性，而不是将其设置为null（或其他值）。 在这种情况下，应该使用element.removeAttribute("href");

https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute

- Chris Southwick

---

这是我见过的最好的禁用<a>元素的答案。我正在寻找一种“渐进增强”的方法，使链接在用户关闭javascript时正常工作，但在javascript可用时禁用链接并增强它们。当使用“不显眼的javascript”时，删除属性（并可选地将值存储在data-href中）非常有效。 - Rounin

我同意你所说的。除此之外，你还可以添加 element.style.cursor = "not-allowed"; 和 element.style.background= "#6c757d"; 使其看起来像是被禁用了。 - Kevz

这是一个非常好的解决方案，因为你只需设置一个 CSS 样式例如 a:not([href]) { color: #ccc; }，就能自动改变链接的样式，而无需使用 Javascript！ - neurino

Answer 6

根据众多答案和我的经验，我的最佳解决方案如下：

<a href="javascript:">I am a useless link</a>

以下是一些选项及其注意事项：

<a href="#">I will make you page jump to top</a> 

<a href="#" onclick="DoSomething(); return false;">I'll break others scripts events</a>

<a href="javascript: openPage()" >Please... I should be an onclick event...</a>

<a href="javascript:" onclick="openPage()" >Please...do I even need to be an anchor?</a>

<script>element.removeAttribute("href") // some browsers will remove link style</script>

<script>element.href = null // some browsers will remove link style</script>

<style>
 a.my-off-class {
    pointer-events: none
 }
 /** I disable hover event too. And... Is this a style responsability?
</style>

- insign

Answer 7

使用以下三个方法：Event.preventDefault();、Event.stopPropagation(); 和 return false;，分别作用如下：

• Event.preventDefault(); ：停止默认的链接点击行为。

Event接口的preventDefault()方法告诉用户代理，如果事件没有显式处理，它的默认操作不应像通常那样执行。(来源: MDN Web文档)

• Event.stopPropagation(); ：阻止在容器父级DOM内点击链接的事件传播 (即，如果两个链接在UI中重叠)。

Event接口的stopPropagation()方法可以阻止当前事件在捕获和冒泡阶段继续传播。(来源: MDN Web文档)

• return false; ：向 onevent 处理程序指示我们正在取消链接点击行为。

处理程序的返回值确定事件是否已被取消。(来源: MDN Web文档)

完整可工作的JSBin演示。

StackOverflow 演示...

document.getElementById('my-link').addEventListener('click', function(e) {
  console.log('Click happened for: ' + e.target.id);
  e.preventDefault();
  e.stopPropagation();
  return false;
});

<a href="https://www.wikipedia.com/" id="my-link" target="_blank">Link</a>

- HoldOffHunger

---

通过将true作为第三个参数（useCapture）添加到addEventListener中，它也会覆盖onclick=。 - Mikael Dúi Bolinder

Answer 8

(function ($) {
    $( window ).load(function() {
        $('.navbar a').unbind('click');
        $('.navbar a').click(function () {
            //DO SOMETHING
            return false;
        });
    });
})(jQuery);

我认为这种方法更容易实现。它的优点在于你的js代码不会嵌入在html文件中，而是存在一个不同的文件中。我认为如果没有unbind，两个事件仍然处于激活状态，但我不确定。总之，你只需要这一个事件。

- user3806549

---

unbind 是必要的吗？我认为 return false 或 e.preventDefault() 就足够了。 - Tasos K.

请通过编辑您的答案来解释 OP 代码中的问题以及为什么这个解决方案可以解决问题。 - Baum mit Augen

Answer 9

禁用链接最简单的方法是不显示它。每当您想要测试条件是否满足以隐藏“上一页”按钮时，请运行此函数（将if (true)替换为您的条件）：

var testHideNav = function() {
    var aTags = document.getElementsByTagName('a'),
        atl = aTags.length,
        i;

    for (i = 0; i < atl; i++) {
        if (aTags[i].innerText == "Previous") {
            if (true) { // your condition to disable previous
                aTags[i].style.visibility = "hidden";
            } else {
                aTags[i].style.visibility = "visible";
            }
        } else if (aTags[i].innerText == "Next") {
            if (false) { // your condition to disable next
                aTags[i].style.visibility = "hidden";
            } else {
                aTags[i].style.visibility = "visible";
            }
        }
    }
};

每当您需要检查条件是否更改时，请运行testHideNav()。

- mVChr

Answer 10

anchor.href = null;

- dn3s

---

Chrome 尝试导航到名为 null 的页面，以获取当前答案。 - OrangeKing89