栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何禁用HTML链接

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何禁用HTML链接

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

CSS方式

当大多数浏览器都支持它时,这应该是 正确的方法 (但请参阅后面):

a.disabled {    pointer-events: none;}

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

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

带有:

<span ><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  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()
更加清晰。请注意,这里我
disabled
以一种非标准的方式使用属性,如果您对此很在意,则将属性替换为类,并替换
.is("[disabled]")
.hasClass("disabled")
(使用
addClass()
和添加和删​​除
removeClass()
)。

指出:
“在某些情况下,单击事件已绑定到某些“实际”功能(例如,使用基因敲除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框架,则可能会看到禁用链接的样式不正确。例如,Bootstrap3.x可以处理这种情况,并且可以正确地使用

disabled
属性和
.disabled
类对按钮进行样式设置。相反,如果您要清除链接(或使用其他Javascript技术之一),则还必须处理样式,因为一个
<a>
不带
href
的仍被标记为启用。

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

不要忘了还包括一个属性

aria-disabled="true"
连同
disabled
属性/类。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/416008.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号