javascript - 如何禁用 HTML 链接

Question

我在 <td> 中有一个链接按钮我必须禁用。这适用于 IE，但不适用于 Firefox 和 Chrome。
结构是 - 内部链接 <td> .我无法在 <td> 中添加任何容器(如 div/span)

我尝试了以下所有但没有在 Firefox 上工作(使用 1.4.2 js):

$(td).children().each(function () {
        $(this).attr('disabled', 'disabled');
  });


  $(td).children().attr('disabled', 'disabled');

  $(td).children().attr('disabled', true);

  $(td).children().attr('disabled', 'true');

注意 - 我无法取消注册 anchor 标记的点击功能，因为它是动态注册的。我必须在禁用模式下显示链接。

Answer 1

您不能禁用链接(以可移植的方式)。您可以使用其中一种技术(每种技术都有自己的优点和缺点)。

CSS方式

这应该是 正确的方式 (但见下文)，当大多数浏览器都支持它时:

a.disabled {
    pointer-events: none;
}

例如，这就是 Bootstrap 3.x 所做的。目前(2016 年)只有 Chrome、FireFox 和 Opera(19+)才能很好地支持它。 Internet Explorer 从版本 11 开始支持此功能，但 not for links 但它在外部元素中可用，例如:

span.disable-links {
    pointer-events: none;
}

和:

<span class="disable-links"><a href="#">...</a></span>

解决方法

我们可能需要为 pointer-events: none 定义一个 CSS 类，但是如果我们重用 disabled 属性而不是 CSS 类呢？严格来说， disabled 不支持 <a>，但浏览器不会提示未知属性。使用 disabled 属性 IE 将忽略 pointer-events 但它会尊重 IE 特定的 disabled 属性；其他符合 CSS 的浏览器将忽略未知的 disabled 属性并尊重 pointer-events 。写比解释容易:

a[disabled] {
    pointer-events: none;
}

IE 11 的另一个选项是将链接元素的 display 设置为 block 或 inline-block :

<a style="pointer-events: none; display: inline-block;" href="#">...</a>

请注意，如果您需要支持 IE(并且您可以更改您的 HTML)，这可能是一个可移植的解决方案，但是...

所有这些都说请注意 pointer-events 仅禁用...指针事件。 链接仍可通过键盘导航 然后您还需要应用此处描述的其他技术之一。

重点

结合上述 CSS 技术，您可以以非标准方式使用 tabindex 来防止元素被聚焦:

<a href="#" disabled tabindex="-1">...</a>

我从来没有检查过它与许多浏览器的兼容性，所以你可能想在使用它之前自己测试它。它具有无需 JavaScript 即可工作的优势。不幸的是(但很明显) tabindex 不能从 CSS 中改变。

拦截点击

对 JavaScript 函数使用 href，检查条件(或禁用属性本身)，以防万一。

$("td > a").on("click", function(event){
    if ($(this).is("[disabled]")) {
        event.preventDefault();
    }
});

要禁用链接，请执行以下操作:

$("td > a").attr("disabled", "disabled");

要重新启用它们:

$("td > a").removeAttr("disabled");

如果您想要而不是 .is("[disabled]")，您可以使用 .attr("disabled") != undefined(当未设置属性时，jQuery 1.6+ 将始终返回 undefined)但 is() 更加清晰(感谢 Dave Stewart 提供此提示)。请注意这里我以非标准方式使用 disabled 属性，如果你关心这个，那么用一个类替换属性并将 .is("[disabled]") 替换为 .hasClass("disabled")(添加和删除 addClass() 和 removeClass())。

Zoltán Tamási noted in a comment 说“在某些情况下，点击事件已经绑定(bind)到一些“真实”的函数(例如使用knockoutjs)在这种情况下，事件处理程序的排序可能会导致一些麻烦。因此，我通过将返回错误处理程序绑定(bind)到链接的 touchstart 、 mousedown 和 keydown 事件。它有一些缺点(它会阻止在链接上启动触摸滚动)”但处理键盘事件也有利于防止键盘导航。

请注意，如果未清除 href，则用户可能会手动访问该页面。

清除链接

清除 href 属性。使用此代码，您无需添加事件处理程序，而是更改链接本身。使用此代码禁用链接:

$("td > a").each(function() {
    this.data("href", this.attr("href"))
        .attr("href", "javascript:void(0)")
        .attr("disabled", "disabled");
});

这是一个重新启用它们的方法:

$("td > a").each(function() {
    this.attr("href", this.data("href")).removeAttr("disabled");
});

就我个人而言，我不太喜欢这个解决方案(如果你不必对禁用的链接做更多的事情)，但它可能更兼容，因为链接的方式多种多样。

假点击处理程序

在 onclick 处添加/删除 return false 函数，链接将不会被跟踪。要禁用链接:

$("td > a").attr("disabled", "disabled").on("click", function() {
    return false; 
});

要重新启用它们:

$("td > a").removeAttr("disabled").off("click");

我认为没有理由更喜欢这个解决方案而不是第一个。

造型

样式更简单，无论您使用什么解决方案禁用链接，我们都添加了 disabled 属性，以便您可以使用以下 CSS 规则:

a[disabled] {
    color: gray;
}

如果您使用的是类而不是属性:

a.disabled {
    color: gray;
}

如果您使用的是 UI 框架，您可能会发现禁用链接的样式不正确。例如，Bootstrap 3.x 处理这种情况，并且按钮的样式正确，带有 disabled 属性和 .disabled 类。相反，如果您要清除链接(或使用其他 JavaScript 技术之一)，您还必须处理样式，因为没有 <a> 的 href 仍被绘制为已启用。

可访问的富互联网应用程序 (ARIA)

不要忘记还包括属性 aria-disabled="true" 和 disabled 属性/类。