如何仅使用CSS禁用链接

Question

有没有一种使用CSS禁用链接的方法？

我有一个名为 current-page 的类，并希望拥有此类的链接被禁用，以便在单击时不执行任何操作。

- RSK

---

经过大量搜索，我找到了这个问题的完美答案。 http://css-tricks.com/pointer-events-current-nav/ - RSK

使用链接还是不使用链接，更多的是语义上的价值而非表现上的价值。它不应该通过 CSS 禁用，而是通过利用适用于任何 HTML 元素的 hidden 属性来禁用。然后可以使用 CSS 选择器例如 a[hidden] 来选择锚点并相应地进行样式设置。 - Armen Michaeli

@amn 但我认为浏览器不会显示带有隐藏属性的元素，因此样式变得无关紧要。 - user1794469

如果你使用CSS，例如display: block或其他值，你可以指示它们这样做。但是hidden并不总是适用的——它适用于无关紧要的元素，从问题中不清楚为什么链接应该被禁用。这可能是XY问题的一个例子。 - Armen Michaeli

点击只是人们与链接交互的一种形式。因此，避免点击事件并不能完全禁用链接。搜索引擎仍然会考虑该链接。 - Andy

@RSK pointer-events: none 只是阻止了指针设备点击链接。通过按下 Tab 键直到链接获得焦点，然后按下空格仍然可以“点击”链接。 - undefined

Answer 1

来自这个解决方案：

[aria-current="page"] {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}

<a href="link.html" aria-current="page">Link</a>

如需浏览器支持，请参见https://caniuse.com/#feat=pointer-events。如果需要支持Internet Explorer，可以使用解决方法，请参见此答案。

警告：在CSS中使用pointer-events对于非SVG元素是实验性的。该功能曾经是CSS 3 UI草案规范的一部分，但由于存在许多问题，已被推迟到CSS 4。

- RSK

---

此外，这并不能避免切换到链接然后按回车键。 - Jono

如果你能稍微调整一下样式，让用户能够看出它是被禁用的。可以给它一些不透明度：.2 - DNRN

现在，这个功能在所有现代浏览器中都可以使用，包括IE 11。如果你需要支持IE 10及以下版本，你可以使用JavaScript polyfill（例如 这个）。 - Keavon

重要说明：这只是禁用了点击，而不是实际的链接本身。仍然可以使用Tab + Enter来“点击”链接。 - Pikamander2

使用 pointer-events: none; 并不完美，它也会禁用其他事件，比如悬停事件，这对于显示 title="…" 或工具提示是必需的。我发现使用 JS 解决方案更好（使用 event.preventDefault();），加上一些 CSS（cursor: default; opacity: 0.4;）和一个解释为什么链接被禁用的工具提示。 - Quinn Comendant

Answer 2

.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}

<a href="#" class="disabled">link</a>

- Amir Keshavarz

---

你可能需要将显示设置为inline-block（或其他不是inline的选项）。 - dev_masta

不错，但要注意指针事件在浏览器支持方面的问题（即< IE11）：http://caniuse.com/#search=pointer-events - Darren Shewry

尝试将pointer-events:none;更改为pointer-events:unset;，这样可以将光标更改为cursor:not-allowed;。这样可以更好地向用户显示发生了什么。截至今天，在FF、Edge、Chrome、Opera和Brave中似乎有效。 - Sablefoste

@Sablefoste 在Chrome 60中对我无效。光标确实是“not-allowed”，但链接仍然可点击。 - soupdog

这个不起作用。pointer-events: none 只能阻止指针设备点击链接。但是，通过按下 Tab 键直到链接获得焦点，然后按下空格键仍然可以“点击”链接。 - undefined

Answer 3

CSS只能用于更改样式。最好的方法可能是使用纯CSS将链接完全隐藏。

你实际上需要一些JavaScript代码。以下是使用jQuery库实现您想要的内容的方法。

$('a.current-page').click(function() { return false; });

- nickf

---

不要忘记阻止默认行为：function(ev){ ev.preventDefault(); ev.stopPropagation(); return false;}。 - ldiqual

@Idiqual，“return false”表示返回假值。 - nickf

只有在使用“href”属性设置操作时，“return false”才起作用。 - Justin

此版本还可以用于禁用点击，同时保留其他指针事件，如:hover或:focus！顶级答案！ - Charlie Tupman

尽管这在所有浏览器中都有效，但它只禁用了点击链接的功能。请记住，许多用户习惯于从上下文菜单或使用中间鼠标按钮打开链接。 - Alexandru Severin

Answer 4

CSS 无法禁用链接。它可以阻止指针事件（如点击），但点击不是激活链接的唯一方式。您有以下选项：

• 在您的 <a> 标记中不包括 href 或 onclick 属性。
• 使用 document.querySelector 等方法查找要禁用的锚元素。删除它们的 href 或 onclick 属性，以便它们不再具有任何方法可以激活的链接行为。

- easeout

---

这不是正确的答案——pointer-events: none; CSS 可以禁用它。 - Adam Pietrasiak

我没想到那个！或者2010年还不存在这个属性？不管怎样，“pointer-events:none”确实可以禁用鼠标事件。但它不能禁用底层链接。在我在Chrome 81中的测试中，我仍然可以通过“tab”键聚焦到链接上并按回车键激活它。 - easeout

Answer 5

Bootstrap禁用链接

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Bootstrap禁用按钮但外观类似链接

<button type="button" class="btn btn-link">Link</button>

- Jigar Bhatt

Answer 6

你可以将 href 属性设置为 javascript:void(0)：

.disabled {
  /* Disabled link style */
  color: black;
}

<a class="disabled" href="javascript:void(0)">LINK</a>

- Xinus

---

@nickf 是的，然而这是一个简洁的解决方案，比在禁用时依赖于IE默认样式要好。 - SausageFingers

我认为这可能比那更加复杂。这里有一个解决方案http://snook.ca/archives/javascript/clear_links_to_1 - Mike Gifford

Answer 7

我使用了：

.current-page a:hover {
    pointer-events: none !important;
}

而这还不够，在一些浏览器中仍然会闪烁地显示链接。

我不得不添加：

.current-page a {
    cursor: text !important;
}

- Pablo Molina

---

我认为使用a[disabled]:active { pointer-events: none !important; }会更好。 - Masamoto Miyata

这个方法不起作用。pointer-events: none 只能防止指针设备点击链接。通过按下Tab键直到链接获得焦点，然后按下空格仍然可以“点击”链接。 - undefined

Answer 8

如果你希望它仅使用CSS，那么禁用逻辑应该由CSS定义。

要将逻辑移动到CSS定义中，您需要使用属性选择器。以下是一些示例：

禁用具有精确 href 的链接：=

您可以选择禁用包含特定 href 值的链接，如下所示：

<a href="//website.com/exact/path">Exact path</a>

[href="//website.com/exact/path"]{
  pointer-events: none;
}

禁用包含路径片段*=的链接：

在这里，任何包含路径中的/keyword/的链接都将被禁用：

<a href="//website.com/keyword/in/path">Contains in path</a>

[href*="/keyword/"]{
  pointer-events: none;
}

禁用以^=开头的链接

[attribute^=value]操作符可以选择以某个特定值开头的属性，使您可以排除网站和根路径。

<a href="//website.com/begins/with/path">Begins with path</a>

[href^="//website.com/begins/with"]{
  pointer-events: none;
}

你甚至可以使用它来禁用非HTTPS链接。例如：

a:not([href^="https://"]){
  pointer-events: none;
}

禁用以$=结尾的链接

[attribute$=value]操作符可以选择以特定值结尾的属性，常用于去除文件扩展名。

<a href="/path/to/file.pdf">Link to pdf</a>

[href$=".pdf"]{
  pointer-events: none;
}

或任何其他属性

CSS 可以针对任何 HTML 属性进行定位。可以是 rel、target、data-custom 等等...

<a href="#" target="_blank">Blank link</a>

[target=_blank]{
  pointer-events: none;
}

组合属性选择器

您可以链接多个规则。比如，您想禁用所有外部链接，但不包括指向您网站的链接：

a[href*="//"]:not([href*="my-website.com"]) {
    pointer-events: none;
}

或者禁用特定网站的PDF文件链接：

<a href="//website.com/path/to/file.jpg">Link to image</a>

[href^="//website.com"][href$=".jpg"] {
  color: red;
}

浏览器支持

属性选择器自Internet Explorer 7起得到支持。而:not()选择器则自Internet Explorer 9起得到支持。

- GuCier

---

如何使用disabled选择器禁用链接？例如：<a class="test" disabled href="3">test</a> a:disabled{ cursor:not-allowed; } - ecasper

这个不起作用。pointer-events: none 只能阻止指针设备点击链接。通过按 Tab 键直到链接获得焦点，然后按下空格仍然可以“点击”链接。 - undefined

Answer 9

在HTML上应用下面的类。

.avoid-clicks {
  pointer-events: none;
}

- Viplav Soni

---

这个不起作用。pointer-events: none 只能阻止指针设备点击链接。通过按 Tab 键直到链接获得焦点，然后按下空格仍然会“点击”链接。 - undefined

Answer 10

通过CSS，您可以使用包裹div上的CSS来实现这一点，将其设置为消失并用其他内容替换它。

例如：

您可以通过在包裹div上设置CSS来实现此目的，将其设置为消失，并使用其他内容代替它。

例如：

<div class="disabled">
    <a class="toggleLink" href="wherever">blah</a>
    <span class="toggleLink">blah</span
</div>

使用以下CSS：

.disabled a.toggleLink { display: none; }
span.toggleLink { display: none; }
.disabled span.toggleLink { display: inline; }

要真正关闭标签，您需要像其他人描述的那样替换其点击事件或href属性。 PS：仅澄清一下，我认为这是一个相当凌乱的解决方案，并且对于SEO也不是最好的，但我相信这是纯CSS中最好的解决方案。

- fyjham