如何禁用 HTML 链接 [英] How to disable HTML links

问题描述

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

I have a link button inside a <td> which I have to disable. This works on IE but not working in Firefox and Chrome. Structure is - Link inside a <td>. I cannot add any container in the <td> (like div/span)

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

I tried all the following but not working on Firefox (using 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');

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

Note - I cannot de-register the click function for the anchor tag as it is registered dynamically. AND I HAVE TO SHOW THE LINK IN DISABLED MODE.

推荐答案

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

You can't disable a link (in a portable way). You can use one of these techniques (each one with its own benefits and disadvantages).

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

This should be the right way (but see later) to do it when most of browsers will support it:

a.disabled {
    pointer-events: none;
}

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

It's what, for example, Bootstrap 3.x does. Currently (2016) it's well supported only by Chrome, FireFox and Opera (19+). Internet Explorer started to support this from version 11 but not for links however it's available in an outer element like:

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

与:

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

解决方法

我们可能需要为 pointer-events: none 定义一个 CSS 类，但是如果我们重用 disabled 属性而不是一个 CSS 类?严格来说， 不支持 disabled，但浏览器不会抱怨 unknown 属性.使用 disabled 属性 IE 将忽略 pointer-events 但它会尊重 IE 特定的 disabled 属性；其他 CSS 兼容浏览器将忽略 unknown disabled 属性并尊重 pointer-events.写起来比解释起来容易:

Workaround

We, probably, need to define a CSS class for pointer-events: none but what if we reuse the disabled attribute instead of a CSS class? Strictly speaking disabled is not supported for <a> but browsers won't complain for unknown attributes. Using the disabled attribute IE will ignore pointer-events but it will honor IE specific disabled attribute; other CSS compliant browsers will ignore unknown disabled attribute and honor pointer-events. Easier to write than to explain:

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

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

Another option for IE 11 is to set display of link elements to block or inline-block:

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

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

Note that this may be a portable solution if you need to support IE (and you can change your HTML) but...

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

All this said please note that pointer-events disables only...pointer events. Links will still be navigable through keyboard then you also need to apply one of the other techniques described here.

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

In conjunction with above described CSS technique you may use tabindex in a non-standard way to prevent an element to be focused:

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

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

I never checked its compatibility with many browsers then you may want to test it by yourself before using this. It has the advantage to work without JavaScript. Unfortunately (but obviously) tabindex cannot be changed from CSS.

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

Use a href to a JavaScript function, check for the condition (or the disabled attribute itself) and do nothing in case.

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

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

To disable links do this:

$("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() 添加和删除).

If you want instead of .is("[disabled]") you may use .attr("disabled") != undefined (jQuery 1.6+ will always return undefined when the attribute is not set) but is() is much more clear (thanks to Dave Stewart for this tip). Please note here I'm using the disabled attribute in a non-standard way, if you care about this then replace attribute with a class and replace .is("[disabled]") with .hasClass("disabled") (adding and removing with addClass() and removeClass()).

Zoltán Tamási 在评论中指出在某些情况下，单击事件已经绑定到某些真实"函数(例如使用knockoutjs)在这种情况下，事件处理程序的排序可能会导致一些麻烦.因此，我通过将返回错误处理程序绑定到链接的 touchstart、mousedown 和 keydown 事件.它有一些缺点(它会阻止在链接上开始触摸滚动)" 但是处理键盘事件还有助于防止键盘导航.

Zoltán Tamási noted in a comment that "in some cases the click event is already bound to some "real" function (for example using knockoutjs) In that case the event handler ordering can cause some troubles. Hence I implemented disabled links by binding a return false handler to the link's touchstart, mousedown and keydown events. It has some drawbacks (it will prevent touch scrolling started on the link)" but handling keyboard events also has the benefit to prevent keyboard navigation.

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

Note that if href isn't cleared it's possible for the user to manually visit that page.

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

Clear the href attribute. With this code you do not add an event handler but you change the link itself. Use this code to disable links:

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

这个是为了重新启用它们:

And this one to re-enable them:

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

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

Personally I do not like this solution very much (if you do not have to do more with disabled links) but it may be more compatible because of various way to follow a link.

添加/删除一个 onclick 函数，如果你return false，链接将不会被跟踪.禁用链接:

Add/remove an onclick function where you return false, link won't be followed. To disable links:

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

要重新启用它们:

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

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

I do not think there is a reason to prefer this solution instead of the first one.

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

Styling is even more simple, whatever solution you're using to disable the link we did add a disabled attribute so you can use following CSS rule:

a[disabled] {
    color: gray;
}

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

If you're using a class instead of attribute:

a.disabled {
    color: gray;
}

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

If you're using an UI framework you may see that disabled links aren't styled properly. Bootstrap 3.x, for example, handles this scenario and button is correctly styled both with disabled attribute and with .disabled class. If, instead, you're clearing the link (or using one of the others JavaScript techniques) you must also handle styling because an <a> without href is still painted as enabled.

不要忘记同时包含一个属性 aria-disabled="true" 和 disabled 属性/类.

Do not forget to also include an attribute aria-disabled="true" together with disabled attribute/class.

这篇关于如何禁用 HTML 链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！