如何使锚链接不可点击或禁用？

Posted 2023-05-07

【中文标题】如何使锚链接不可点击或禁用？

【英文标题】：How do you make an anchor link non-clickable or disabled?

【发布时间】：2011-12-01 01:53:18

【问题描述】：

我有一个锚链接，一旦用户点击它，我想禁用它。或者，从文本周围删除锚标记，但绝对保留文本。

<a href='' id='ThisLink'>some text</a>

我可以通过添加 .attr("disabled", "disabled"); 的按钮轻松完成此操作 我成功添加了 disabled 属性，但链接仍然可以点击。 我真的不在乎文本是否带下划线。

有什么线索吗？

当您点击错误的音乐家时，它应该只添加“错误”，然后变得无法点击。 当您点击并正确时，它应该添加“Awesome”，然后禁用所有<a>标签。

【问题讨论】：

删除 href 部分并添加到您的 CSS 中：“cursor:pointer”，我假设您有 $('#ThisLink').click 或类似的东西？

$("#ThisLink").parent().find("a").remove();

亚当，这个解决方案几乎可以工作。它虽然去掉了 a 标签中的所有文本。

How to disable html links的可能重复

【参考方案1】：

当你想禁用点击时，最简洁的方法是添加一个带有 pointer-events:none 的类。它的功能就像一个普通的标签。

.disableClick
    pointer-events: none;

【讨论】：

使用这个想法，更简单的方法是使用 a[disabled] 作为 css 的选择器，这样您就不需要将 .disableClick 类添加到锚点

要小心，因为您仍然可以使用指针事件禁用选项卡：无

这个解决方案在现代浏览器中对我有好处。我有可用的锚标签，这些标签绑定到点击事件，并阻止在他们的进程做他们的事情时向他们发送垃圾邮件，我以编程方式添加它，然后在进程完成时将其删除。在我的情况下，标签到禁用的锚标签也不是问题，但可能是其他人。 YMMV

使用pointer-events:none 也会禁用cursor、标题文本和其他鼠标悬停事件。

将此与tabindex="-1" 配对似乎可以满足所有用例，但在 javascript 中生成的点击事件除外。

【参考方案2】：

<a href='javascript:void(0);'>some text</a>

【讨论】：

请解释您的解决方案，以便未来访问此问题的人了解它如何解决手头的问题。

发件人：MDN: The void Operator。当浏览器跟随javascript: URI 时，它会评估URI 中的代码，然后用返回值替换页面内容，除非返回值是undefined。 void 运算符可用于返回 undefined。例如：<a href="javascript:void(0);"> Click here to do nothing </a> 但是请注意，javascript: 伪协议不鼓励使用其他替代方案，例如不显眼的事件处理程序。

【参考方案3】：

使用 pointer-events CSS 样式。 （正如杰森麦克唐纳所建议的）

请参阅 MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events。 大多数浏览器都支持它。

如果你有如下的全局 CSS 规则，简单地添加“禁用”属性到锚点就可以了：

a[disabled], a[disabled]:hover 
   pointer-events: none;
   color: #e1e1e1;

【讨论】：

+1 用于通过 [disabled] 属性而不是类添加样式。需要注意的是 pointer-events: none;但在 IE11 之前的版本中不起作用。

所有 IE 都有自己的专有逻辑，默认禁用锚点、按钮甚至其他元素。非 IE 浏览器需要这种解决方法。

+1。这样我下次就不必再查找它了：所需的 javascript（使用 jQuery）将是 $("#elementid").attr("disabled", "disabled");。在 CSS 中包含 cursor: default 也可能会有所帮助（如 Muhammad Nasir 所建议的那样）。

A 元素没有 disabled 属性，将其用作选择器可能有效，也可能无效。

直观 - 很好的解决方案。我惊讶地发现 <a /> 元素没有禁用属性 - 看起来很奇怪。

【参考方案4】：

我刚刚意识到您的要求（我希望）。这是一个丑陋的解决方案

var preventClick = false;

$('#ThisLink').click(function(e) 
    $(this)
       .css('cursor', 'default')
       .css('text-decoration', 'none')

    if (!preventClick) 
        $(this).html($(this).html() + ' lalala');
    

    preventClick = true;

    return false;
);

【讨论】：

这实际上可以真正解决问题，有点...代替.click，在主体上使用.on 并委托给'a[disabled]'。然后使用相同的选择器将 css 代码放入实际的 css 中。然后，防止点击就像 event.preventDefault() 一样简单并返回 false

不同意，使用 CSS "pointer-events: none;"相反，就像其他答案一样。

【参考方案5】：

$('a').removeAttr('href')

或

$('a').click(function() return false)

视情况而定

【讨论】：

通过 removeAttr 删除 a 对我不起作用。 .removeAttr("href") awesomealbums.info/?WhoAmI

【参考方案6】：

Bootstrap 为我们提供了.disabled 类。请使用它。

但.disabled 类仅在“a”标签已包含“btn”类时才有效。它不适用于任何旧的“a”标签。 btn 类在某些情况下可能不合适，因为它具有样式内涵。在幕后，.disabled 类将 pointer-events 设置为 none，因此您可以让 CSS 做与 Saroj Aryal 和 Vitrilo 建议的事情相同的事情。 （感谢 Les Nightingill 的建议）。

【讨论】：

.disabled 类仅在“a”标签已包含“btn”类时才有效。它不适用于任何旧的“a”标签。 'btn' 类在某些情况下可能不合适，因为它具有风格内涵。在幕后，.disabled 类将指针事件设置为无，因此您可以让 css 做与 Saroj Aryal 和 Vitrilo 所建议的相同的事情。

感谢您的详细评论。它为许多用户澄清了很多。我可以使用您评论中的一些文字来扩展我的答案吗？

【参考方案7】：

添加一个css 类：

.disable_a_href
    pointer-events: none;

添加这个jquery:

$("#ThisLink").addClass("disable_a_href"); 

【参考方案8】：

只需从锚标记中删除href 属性即可。

【讨论】：

在某些浏览器中删除 href 只是将 href 设置为 / 或当前页面。

我认为这应该是第一种方法

【参考方案9】：

最好的办法是阻止默认动作。对于锚标签，默认行为是重定向到href指定地址。

所以下面的 javascript 在这种情况下效果最好：

$('#ThisLink').click(function(e)

    e.preventDefault();
);

【参考方案10】：

您可以使用 onclick 事件来禁用点击操作：

<a href='' id='ThisLink' onclick='return false'>some text</a>

或者你可以只使用<a>标签以外的东西。

【讨论】：

您可以将其与text-decoration: none 和.disabledLink color: #000 !important; 结合使用，使其看起来像普通文本。

突兀的 javascript 是一个糟糕的解决方案。

【参考方案11】：

Jason MacDonald cmets 为我工作，在 Chrome、Mozila 和 IE 中进行了测试。

添加灰色以显示禁用效果。

.disable_a_href
    pointer-events: none;
    **color:#c0c0c0 !important;**

Jquery 只选择了锚列表中的第一个元素，添加了元字符 (*) 来选择和禁用 ID 为 #ThisLink 的所有元素。

$("#ThisLink*").addClass("disable_a_href"); 

【参考方案12】：

只写一行 jQuery 代码

$('.hyperlink').css('pointer-events','none');

如果你想写在css文件中

.hyperlink
    pointer-events: none;

【参考方案13】：

在样式表中创建以下类：

  .ThisLink
           pointer-events: none;
           cursor: default;
    

将此类动态添加到您的链接中，如下所示。

 <a href='' id='elemID'>some text</a>

    //   or using jquery
<script>
    $('#elemID').addClass('ThisLink');
 </script>

【讨论】：

这与 Jason MacDonald 的 answer 有何不同？

【参考方案14】：

这是我用来禁用的方法。希望对你有帮助。

$("#ThisLink").attr("href","javascript:;");

【讨论】：

这是简单易行的解决方案，应该接受！

【参考方案15】：

试试这个：

$('a').contents().unwrap();

【讨论】：

什么是锚包含对其程序至关重要的样式规则，这是一个无视 css 的修复

【参考方案16】：

只需在 SASS 中：

.some_class
     // styles...

     &.active 
       pointer-events:none;
     

【讨论】：

虽然此代码可能会回答问题，但提供有关 why 和/或 如何 回答问题的额外上下文将显着改善其长期价值。请edit你的答案添加一些解释。

【参考方案17】：

永远不要信任浏览器，因为用户可以在服务器不知情的情况下以任何方式更改页面。

如果一个链接只能工作一次，您需要做的第一件事是确保服务器端的点击只被接受一次（例如，使用一次性令牌指定为查询字符串），因为 href 属性中存在的 URL 可以被用户复制并插入到浏览器的导航栏中并多次运行。

在 javascript 方面，您可以做的最安全的事情是用另一个标签完全替换 <a> 链接，保留内容：

/** Replace element, preserving attributes and moving descendant nodes from the previous one.
 *
 * @param HTMLElement element Element to be replaced changing tag.
 * @param String new_tag New element tag.
 * @return HTMLElement New created element.
 */
function rename_element_tag(element, new_tag) 
    let new_block = document.createElement(new_tag);
    for (let j = 0; j < element.attributes.length; ++j)
        new_block.setAttribute(element.attributes[j].name, element.attributes[j].value);

    $(new_block).insertAfter(element);
    while (element.childNodes.length > 0)
        new_block.appendChild(element.childNodes[0]);

    $(element).remove();

    return new_block;

此函数通过“修改”标签来替换传递的元素，并通过使用 vanilla javascript 而不是 jQuery 迭代所有子节点来保留属性和内容以处理文本节点。

在您的情况下，您必须跳过 href 属性。

【参考方案18】：

$('#ThisLink').one('click',function()
  $(this).bind('click',function()
    return false;
  );
);

这将是另一种方法，带有return false 的处理程序将禁用链接，将在单击后添加。

【参考方案19】：

最简单的方法

在您的 html 中：

<a id="foo" disabled="true">xxxxx<a>

在你的 js 中：

$('#foo').attr("disabled", false);

如果你把它当成属性使用就完美了

【讨论】：

disabled 不是 标签的有效属性