是否可以使用 CSS 使 HTML 锚标记不可点击/不可链接？

Posted 2023-03-06

【中文标题】是否可以使用 CSS 使 HTML 锚标记不可点击/不可链接？

【英文标题】：Is it possible to make an HTML anchor tag not clickable/linkable using CSS?

【发布时间】：2011-10-07 08:17:49

【问题描述】：

例如，如果我有这个：

<a style="" href="page.html">page link</a>

有什么我可以用于 style 属性的东西，可以使它的链接不可点击，也不会带我到 page.html？

或者，我唯一的选择是不将“页面链接”包装在锚标记中吗？

编辑：我想说明我为什么要这样做，以便人们能够提供更好的建议。我正在尝试设置我的应用程序，以便开发人员可以选择他们想要的导航样式类型。

所以，我有一个链接列表，当前始终选择一个，而其他所有链接都没有。对于未选中的链接，我显然希望那些是普通的可点击锚标签。但是对于选定的链接，有些人更喜欢该链接保持可点击状态，而另一些人则喜欢使其不可点击。

现在我可以轻松地以编程方式不在所选链接周围包裹锚标记。但我认为如果我总是可以将选定的链接包装成这样的东西会更优雅：

<a id="current" href="link.html">link</a>

然后让开发者通过CSS来控制链接样式。

【问题讨论】：

***.com/questions/2091168/disable-a-link-using-css

如果您不希望它被点击，也许使用<span> 代替？

我必须同意大卫的观点。不要破坏 UI 范式。用户的期望是可以点击链接。如果它不能被点击，那么它不是一个真正的链接是吗？

查看***.com/questions/2091168/disable-a-link-using-css 以获得更多可能的答案。

是的，这是个糟糕的主意。屏幕阅读器仍会将链接视为链接，因为它是链接。搜索引擎也是。事实上，任何理解 HTML 的东西。不要这样做。没有什么“优雅”的。

【参考方案1】：

你可以使用这个css：

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

然后将类分配给您的 html 代码：

<a style="" href="page.html" class="inactiveLink">page link</a>

它使链接不可点击，并且光标样式为箭头，而不是链接所具有的手。

或者在html中使用这个样式：

<a style="pointer-events: none; cursor: default;" href="page.html">page link</a>

但我建议第一种方法。

【讨论】：

我可以确认这适用于 Ubuntu 版本的 Firefox/Chrome。想知道它是否可以在 Windows 上的 IE 上运行。

这个解决方案的关键是：pointer-events。 Here 兼容性表的链接

@JohnMerlino：在 IE9 中不起作用。在 masegaloeh 的兼容性表链接中查看更多信息

警告：Tab 键将焦点移动到链接并使用 Enter 激活链接仍然有效

我不认为 cursor: default 是必要的。只要你有指针事件：无，这似乎工作。

【参考方案2】：

这对 CSS 来说不太容易，因为它不是一种行为语言（即 javascript），唯一简单的方法是在锚点上使用 JavaScript OnClick 事件并将其返回为 false，这可能是您可以使用的最短代码：

<a href="page.html" onclick="return false">page link</a>

【讨论】：

@Mike 这个让点击什么都不做，但按钮看起来仍然可以点击。

@acostache 使用 style="cursor:default;"应该对指针有帮助

问题是：“使用 CSS”，所以这是一个很好的答案，但不是正确的答案。

最好使用 css 而不是 onclick="return false" 主要有 3 个原因： 1- 使用 css 您可以将默认链接鼠标光标更改为默认箭头。 2-那是突兀的js。 3-这实际上是返回一个值，您不想每次单击链接时都返回false。

【参考方案3】：

是的.. 有可能使用 css

<a class="disable-me" href="page.html">page link</a>

.disable-me 
    pointer-events: none;

【讨论】：

这是最简洁的方式，但需要注意的是：它仅支持 IE11+ caniuse.com

【参考方案4】：

或者纯 HTML 和 CSS 没有事件：

<div style="z-index: 1; position: absolute;">
    <a style="visibility: hidden;">Page link</a>
</div>
<a href="page.html">Page link</a>

【讨论】：

-1 因为这是一种非常复杂/令人困惑的解决问题的方法。它也没有真正做到问题所要求的（使链接无效）。它只是用一个不可见的元素覆盖链接。迭戈的回答要干净得多。

@developering 我认为 Diego 的回答也更好，应该得到更高的投票和接受。但是，当我写这个答案时（3 年前）pointer-events 几乎没有浏览器支持。

@Paulpro 我大概是这样认为的。很抱歉投反对票！只是想确保最新的答案是最重要的。感谢您的回复。

【参考方案5】：

CSS 旨在影响呈现，而不是行为。

你可以使用一些 JavaScript。

document.links[0].onclick = function(event) 
   event.preventDefault();
;

【参考方案6】：

一种更不显眼的方式（假设你使用 jQuery）：

HTML：

<a id="my-link" href="page.html">page link</a>

Javascript：

$('#my-link').click(function(e)

    e.preventDefault();
);

这样做的好处是逻辑和表示之间的清晰分离。如果有一天你决定这个链接会做其他事情，你不必弄乱标记，只需要 JS。

【讨论】：

你知道你可以很容易地编写非 jQuery 代码来做同样的事情，而且运行得更快：document.getElementById('my-link').onclick = function() return false; ;

我认为大多数人都希望（并且应该）使用某种框架来简化开发。作者没有指定任何性能限制，但是 jQuery 压缩和 gzip 压缩后只有 31KB。我认为收益远大于成本。

认真的吗？什么浏览器不支持 onclick 或 getElementById。好的，所以 IE 2 不支持 onclick，但它也不支持 CSS……我非常怀疑你的 jQuery 代码也可以在 IE 2 中工作。

速度差异可能很小，但如果你不能下载 jQuery 库，那就不会了。我真的不认为在不需要的时候鼓励使用 jQuery 是一个好主意，因为人们会变得依赖它并忘记如何在没有它的情况下编写 Javascript。

@PaulPRO 如果没有作者的要求，这个讨论是没有实际意义的。每个框架都有其目的。如果他不精通 JS，只是做一个妈妈和流行音乐网站，需要操作一些 DOM 元素，那么他使用框架会容易得多。您不愿意使用任何框架是荒谬的。 php 是用 C 编写的。这是否意味着您应该编写 C 而不是使用 PHP？ ios 有 UIKit、Core Data、Quartz 等。Flash 有大量常用的 3rd 方库。同样，每个框架都有其目的。一种纯粹的、非内在的心态对任何人都没有帮助。

【参考方案7】：

答案是：

<a href="page.html" onclick="return false">page link</a>

【参考方案8】：

就像你做的那样简单。 把**javascript:void(0)**放到href里，看看效果 例如

<a href="javascript:void(0)">Demo</a>

不需要 Css，不需要 JS

【参考方案9】：

<a href="page.html" onclick="return false" style="cursor:default;">page link</a>

【讨论】：

没有必要为此添加单独的答案，您对@KaranK 答案的评论就足够了，我想。请避免重复答案。

【参考方案10】：

可以非常简单地用 CSS 来完成。将“a”更改为“p”。 如果您想让它无法点击，您的“页面链接”无论如何都不会指向某个地方。

当你告诉你的 CSS 对这个特定的“p”做悬停动作时，告诉它：

（对于这个例子，我给“p”一个“例子”ID）

#example

  cursor:default;

现在您的光标将与整个页面上的光标保持一致。