禁用的 href 标签

IT技术 javascript html
2021-02-01 18:49:27

尽管该链接已禁用,但它仍然可以点击。

<a href="/" disabled="disabled">123n</a>

如果它被禁用,我可以让它不可点击吗?我一定要使用 JavaScript 吗?

6个回答

在 css 的帮助下,您将禁用超链接。试试下面的

a.disabled {
  pointer-events: none;
  cursor: default;
}
<a href="link.html" class="disabled">Link</a>

请注意,这仅适用于 Internet Explorer 11+
2021-03-18 18:49:27
当使用 Tab 键关注链接标签并按 Enter 时,此属性不起作用。
2021-03-24 18:49:27
@Majidbasirati 我知道这是一篇旧帖子,但我想为选项卡问题提供一个简单的解决方案。您始终可以tabindex="-1"在锚标记内使用以禁用它。
2021-03-24 18:49:27
还使用不透明度来区分活动链接和禁用链接。 opacity: 0.5;
2021-04-03 18:49:27
如果您不关心 IE9-10,则应该只是答案
2021-04-07 18:49:27

超链接没有禁用属性。如果您不想链接某些内容,则需要<a>完全删除标签。

或者,您可以删除它的href属性 - 尽管这有其他 UX 和可访问性问题,如下面的评论中所述,因此不推荐。

此外,我相信简单地清除href并离开<a>不会符合 ADA 标准。
2021-03-14 18:49:27
只需添加光标:无;到相关链接似乎与 cursor: none 一样多;指针事件:无;. . . . 无论如何,它使我能够在单页应用程序站点中更改页面。
2021-03-20 18:49:27
这有效,但如果您将现有的 CSS 留在上面,我会认为这是糟糕的 UX。用户会点击它并认为某些东西坏了。您永远不应该让用户对正在发生的事情感到困惑。
2021-03-30 18:49:27
即使您使用 CSS 光标或指针事件,该链接仍然可以使用键盘导航获得焦点和“可点击”(使用 Enter),如果您尝试禁用某些内容,这可能很糟糕要么删除 href 属性,要么将其转换为跨度
2021-04-05 18:49:27
您还可以添加onclick="return false;"到锚点标记,或者添加一个title解释链接无效属性。
2021-04-10 18:49:27

您可以使用:

<a href="/" onclick="return false;">123n</a>
@rahulshukla 有 catpure 事件可以及早捕获事件。( javascript.info/bubbling-and-capturing )
2021-03-14 18:49:27
如果已经有一个函数作为单击事件的处理程序,则将不起作用
2021-03-20 18:49:27

您可以使用以下解决方案之一:

HTML

<a>link</a>

JavaScript

<a href="javascript:function() { return false; }">link</a>
<a href="/" onclick="return false;">link</a>

CSS

<a href="www.page.com" disabled="disabled">link</a>

<style type="text/css">
    a[disabled="disabled"] {
        pointer-events: none;
    }
</style>

试试这个:

<a href="javascript:void(0)" style="cursor: default;">123n</a>
这也是一个很好的接触,如果你还想保留像“复制链接”这样的右键单击功能
2021-03-22 18:49:27
正确,我总是使用 href="javascript:void(0)"
2021-04-06 18:49:27