javascript - 如何禁用HTML链接(How to disable HTML links)

Question

I have a link button inside a <td> which I have to disable.(我必须禁用<td>的链接按钮。)

This works on IE but not working in Firefox and Chrome.(这适用于IE，但不适用于Firefox和Chrome。) Structure is - Link inside a <td> .(结构是- <td>链接。) I cannot add any container in the <td> (like div/span)(我不能在<td>添加任何容器（例如div / span）) I tried all the following but not working on Firefox (using 1.4.2 js):(我尝试了以下所有方法，但无法在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'); Note - I cannot de-register the click function for the anchor tag as it is registered dynamically.(注意-我无法取消注册锚标记的click功能，因为它是动态注册的。) AND I HAVE TO SHOW THE LINK IN DISABLED MODE.(而且我必须在禁用模式下显示链接。)   ask by Ankit translate from so

Answer 1

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).(您可以使用其中一种技术（每种技术都有其自身的优点和缺点）。) CSS way(CSS方式) This should be the right way (but see later) to do it when most of browsers will support it:(当大多数浏览器都支持它时，这应该是正确的方法 （但请参阅后面）：) a.disabled { pointer-events: none; } It's what, for example, Bootstrap 3.x does.(例如，Bootstrap 3.x就是这样做的。) Currently (2016) it's well supported only by Chrome, FireFox and Opera (19+).(目前（2016年）只有Chrome，FireFox和Opera（19岁以上）才得到很好的支持。) Internet Explorer started to support this from version 11 but not for links however it's available in an outer element like:(Internet Explorer从版本11开始支持此功能，但不支持链接，但是它在外部元素中可用，例如：) span.disable-links { pointer-events: none; } With:(带有：) <span class="disable-links"><a href="#">...</a></span> 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?(我们可能需要为pointer-events: none定义一个CSS类pointer-events: none但是，如果我们重用 disabled属性而不是CSS类，该怎么办？) Strictly speaking disabled is not supported for <a> but browsers won't complain for unknown attributes.(<a>严格不支持disabled ，但是浏览器不会抱怨未知属性。) Using the disabled attribute IE will ignore pointer-events but it will honor IE specific disabled attribute;(使用disabled属性IE将忽略pointer-events但将遵循IE特定的disabled属性;) other CSS compliant browsers will ignore unknown disabled attribute and honor pointer-events .(其他与CSS兼容的浏览器将忽略未知的 disabled属性并兑现pointer-events 。) Easier to write than to explain:(写起来比解释起来容易：) a[disabled] { pointer-events: none; } Another option for IE 11 is to set display of link elements to block or inline-block :(IE 11的另一个选项是将链接元素的display设置为block或inline-block ：) <a style="pointer-events: none; display: inline-block;" href="#">...</a> Note that this may be a portable solution if you need to support IE (and you can change your HTML) but...(请注意，如果您需要支持IE（并且可以更改HTML），那么这可能是一种可移植的解决方案，但是...) All this said please note that pointer-events disables only...pointer events.(所有这些都请注意， pointer-events仅禁用...指针事件。) Links will still be navigable through keyboard then you also need to apply one of the other techniques described here.(链接仍然可以通过键盘进行导航，那么您还需要应用此处介绍的其他技术之一。) Focus(焦点) In conjunction with above described CSS technique you may use tabindex in a non-standard way to prevent an element to be focused:(结合上述CSS技术，您可以非标准方式使用tabindex来防止元素被聚焦：) <a href="#" disabled tabindex="-1">...</a> 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.(它具有无需JavaScript即可工作的优势。) Unfortunately (but obviously) tabindex cannot be changed from CSS.(不幸的是（但显然） tabindex不能从CSS更改。) Intercept clicks(拦截点击) Use a href to a JavaScript function, check for the condition (or the disabled attribute itself) and do nothing in case.(对JavaScript函数使用href ，检查条件（或禁用的属性本身），以防万一。) $("td > a").on("click", function(event){ if ($(this).is("[disabled]")) { event.preventDefault(); } }); To disable links do this:(要禁用链接，请执行以下操作：) $("td > a").attr("disabled", "disabled"); To re-enable them:(要重新启用它们：) $("td > a").removeAttr("disabled"); 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).(如果要代替.is("[disabled]") ，则可以使用.attr("disabled") != undefined （当未设置属性时，jQuery 1.6+总是返回undefined ），但是is()更清晰（感谢Dave Stewart提供的提示）。) 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() ).(请注意，这里我以一种非标准的方式使用disabled属性，如果您对此.hasClass("disabled")关注，则将其替换为类，然后将.is("[disabled]")替换为.hasClass("disabled") （添加和使用addClass()和removeClass()删除。) 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.(ZoltánTamási 在评论中指出： “在某些情况下，单击事件已绑定到某些“实际”功能（例如，使用基因敲除js）。在这种情况下，事件处理程序的排序可能会引起一些麻烦。因此，我通过绑定返回来实现禁用的链接对链接的touchstart ， mousedown和keydown事件的错误处理程序。它有一些缺点（它将阻止在链接上开始触摸滚动）”，但是处理键盘事件也具有防止键盘导航的好处。) Note that if href isn't cleared it's possible for the user to manually visit that page.(请注意，如果未清除href ，则用户可以手动访问该页面。) Clear the link(清除链接) Clear the href attribute.(清除href属性。) 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.(我个人不太喜欢这种解决方案（如果您不必对禁用的链接做更多的事情），但是由于遵循链接的方式多种多样，因此它可能更具兼容性。) Fake click handler(假点击处理程序) Add/remove an onclick function where you return false , link won't be followed.(添加/删除您return false的onclick函数，将不会跟随链接。) To disable links:(禁用链接：) $("td > a").attr("disabled", "disabled").on("click", function() { return false; }); To re-enable them:(要重新启用它们：) $("td > a").removeAttr("disabled").off("click"); I do not think there is a reason to prefer this solution instead of the first one.(我认为没有理由更喜欢这种解决方案而不是第一个解决方案。) Styling(造型) 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:(无论您使用哪种方法来禁用链接，样式都更加简单，我们确实添加了disabled属性，因此您可以使用以下CSS规则：) a[disabled] { color: gray; } If you're using a class instead of attribute:(如果您使用的是类而不是属性：) a.disabled { color: gray; } If you're using an UI framework you may see that disabled links aren't styled properly.(如果您使用的是UI框架，则可能会看到禁用的链接的样式不正确。) Bootstrap 3.x, for example, handles this scenario and button is correctly styled both with disabled attribute and with .disabled class.(例如，Bootstrap 3.x可以处理这种情况，并且可以使用disabled属性和.disabled类正确设置按钮的样式。) 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.(相反，如果您清除链接（或使用其他JavaScript技术之一），则还必须处理样式，因为没有href的<a>仍被绘制为启用状态。) Accessible Rich Internet Applications (ARIA)(可访问的富Internet应用程序（ARIA）) Do not forget to also include an attribute aria-disabled="true" together with disabled attribute/class.(别忘了还包含一个属性aria-disabled="true"和disabled属性/类。)