您不能(以便携式方式)禁用链接。您可以使用其中一种技术(每一种都有其自身的优点和缺点)。
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类,pointer-events: none
但是如果我们重用 该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更改。
拦截点击
使用href
JavaScript函数,检查条件(或禁用的属性本身),以防万一。
$("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
(undefined
当未设置属性时,jQuery 1.6+将始终返回),但is()
更加清晰(感谢Dave Stewart的技巧)。请注意,这里我disabled
以非标准的方式使用属性,如果您对此很在意,则将属性替换为类,然后将其替换.is("[disabled]")
为.hasClass("disabled")
(使用addClass()
和添加和删除removeClass()
)。
ZoltánTamási 在评论中指出:“在某些情况下,单击事件已绑定到某些“实际”功能(例如,使用基因敲除js)。在这种情况下,事件处理程序的排序可能会引起一些麻烦。因此,我通过绑定返回来实现禁用的链接假处理程序的链接的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
的仍被标记为启用。
可访问的富Internet应用程序(ARIA)
不要忘了还包括一个属性aria-disabled="true"
连同disabled
属性/类。