如何禁用 HTML 链接CSS 方式重点拦截点击次数清除链接伪造的点击处理程序造型可访问的富互联网应用程序 (ARIA)

2022-08-30 00:00:29

我有一个链接按钮,我必须禁用它。这适用于IE,但不适用于Firefox和Chrome。<td>

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

$(".myLink").attr('disabled', 'disabled');

$(".myLink").attr('disabled', true);

$(".myLink").attr('disabled', 'true');

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


答案 1

您无法禁用链接(以便携式方式)。您可以使用这些技术之一(每种技术都有自己的优点和缺点)。

CSS 方式

这应该是正确的方法(但稍后再看),当大多数浏览器都支持它时:

a.disabled {
    pointer-events: none;
}

例如,Bootstrap 3.x就是这样做的。目前(2016年),它仅得到Chrome,FireFox和Opera(19 +)的良好支持。Internet Explorer从版本11开始支持此功能,但不适用于链接,但它在外部元素中可用,例如:

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

跟:

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

解决方法

我们可能需要定义一个CSS类,但是如果我们重用该属性而不是CSS类呢?严格来说,它不受支持,但浏览器不会抱怨未知属性。使用属性IE将忽略,但它将遵循IE特定的属性;其他符合CSS标准的浏览器将忽略未知属性和荣誉。写起来比解释起来容易:pointer-events: nonedisableddisabled<a>disabledpointer-eventsdisableddisabledpointer-events

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

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

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

请注意,如果您需要支持IE(并且可以更改HTML),这可能是一个便携式解决方案,但是...

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

重点

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

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

我从未检查过它与许多浏览器的兼容性,那么您可能需要在使用它之前自己测试它。它具有在没有JavaScript的情况下工作的优势。不幸的是(但显然)不能从CSS更改。tabindex

拦截点击次数

使用 javaScript 函数,检查条件(或禁用的属性本身),不执行任何操作以防万一。href

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

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

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

要重新启用它们,请执行以下操作:

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

如果你愿意,你可以使用(jQuery 1.6+将在未设置属性时始终返回),但更清晰(感谢Dave Stewart的这个提示)。请注意,在这里我以非标准的方式使用属性,如果您关心这一点,则将属性替换为类并替换为(添加和删除和)。.is("[disabled]").attr("disabled") != undefinedundefinedis()disabled.is("[disabled]").hasClass("disabled")addClass()removeClass()

Zoltán Tamási在评论中指出,“在某些情况下,点击事件已经绑定到一些'真实'功能(例如使用knockoutjs),在这种情况下,事件处理程序排序可能会导致一些麻烦。因此,我通过将返回 false 处理程序绑定到链接的 touchstartmousedownkeydown 事件来实现禁用的链接。它有一些缺点(它将防止在链接上开始触摸滚动)“,但处理键盘事件也有防止键盘导航的好处。

请注意,如果未清除,则用户可以手动访问该页面。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");
});

就个人而言,我不太喜欢这个解决方案(如果您不必对禁用的链接做更多的事情),但是由于遵循链接的方式多种,它可能更兼容。

伪造的点击处理程序

添加/删除一个函数,其中您 ,链接不会被跟踪。要禁用链接:onclickreturn false

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

要重新启用它们,请执行以下操作:

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

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

造型

样式设置甚至更简单,无论您使用什么解决方案来禁用链接,我们都会添加一个属性,以便您可以使用以下CSS规则:disabled

a[disabled] {
    color: gray;
}

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

a.disabled {
    color: gray;
}

如果您使用的是 UI 框架,您可能会看到禁用的链接未正确设置样式。例如,Bootstrap 3.x 处理此方案,并且按钮的样式正确,包括属性和类。相反,如果您要清除链接(或使用其他JavaScript技术之一),则还必须处理样式,因为没有仍被绘制为启用。disabled.disabled<a>href

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

不要忘记在属性/类中同时包含属性。aria-disabled="true"disabled


答案 2

在css中得到了修复。

td.disabledAnchor a{
       pointer-events: none !important;
       cursor: default;
       color:Gray;
}

当应用于锚点标记时,上面的 css 将禁用点击事件。

有关详细信息,请查看此链接