logo标签列表

如何仅使用CSS禁用链接

htmlcss
933

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

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

48
经过大量搜索，我找到了这个问题的完美答案。 http://css-tricks.com/pointer-events-current-nav/ - RSK
1
使用链接还是不使用链接，更多的是语义上的价值而非表现上的价值。它不应该通过 CSS 禁用，而是通过利用适用于任何 HTML 元素的 hidden 属性来禁用。然后可以使用 CSS 选择器例如 a[hidden] 来选择锚点并相应地进行样式设置。 - Armen Michaeli
@amn 但我认为浏览器不会显示带有隐藏属性的元素，因此样式变得无关紧要。 - user1794469
1
如果你使用CSS，例如display: block或其他值，你可以指示它们这样做。但是hidden并不总是适用的——它适用于无关紧要的元素，从问题中不清楚为什么链接应该被禁用。这可能是XY问题的一个例子。 - Armen Michaeli
点击只是人们与链接交互的一种形式。因此，避免点击事件并不能完全禁用链接。搜索引擎仍然会考虑该链接。 - Andy
@RSK pointer-events: none 只是阻止了指针设备点击链接。通过按下 Tab 键直到链接获得焦点，然后按下空格仍然可以“点击”链接。 - undefined
27个回答
10
如果您想在表单上仅使用HTML/CSS，另一种选择是使用按钮。样式化并设置disabled属性。
例如：http://jsfiddle.net/cFTxH/1/
7

试试这个：

<style>
    .btn-disable {
        display: inline-block;
        pointer-events: none;
    }
</style>
这个方法不起作用。pointer-events: none 只能阻止使用指针设备点击链接。但是，通过按下 Tab 键直到链接获得焦点，然后再按下空格键仍然可以“点击”链接。 - undefined
5

pointer-events 属性允许控制 HTML 元素对鼠标/触摸事件的响应方式，包括 CSS hover/active 状态、JavaScript 中的 click/tap 事件以及光标是否可见。

这并不是唯一禁用链接的方法，但它是一种在 Internet Explorer 10（及更高版本）和所有新浏览器中有效的好的 CSS 方法：

.current-page {
  pointer-events: none;
  color: grey;
}
<a href="#" class="current-page">This link is disabled</a>

这个不起作用。pointer-events: none只能防止指针设备点击链接。通过按Tab键直到链接获得焦点，然后按下空格仍然会“点击”链接。 - undefined
4
我在互联网上搜索，没有比这个更好的方案。基本上，为了禁用按钮点击功能，只需使用jQuery添加CSS样式，如下所示：
$("#myLink").css({ 'pointer-events': 'none' });

然后，若要再次启用它，请执行以下操作。
$("#myLink").css({ 'pointer-events': '' });

这段代码在Firefox和Internet Explorer 11上经过检查，能够正常工作。

5
不需要使用jQuery，你可以在CSS中自己设置这个。 - Bram Vanroy
JavaScript 真的必须吗？ - Peter Mortensen
这个不起作用。pointer-events: none只能阻止指针设备点击链接。但是，通过按Tab键直到链接获得焦点，然后按下空格仍然可以“点击”链接。 - undefined
3
你可以使用以下CSS内容： 

a.button,button {
    display: inline-block;
    padding: 6px 15px;
    margin: 5px;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px;
    -moz-box-shadow: inset 0 3px 20px 0 #cdcdcd;
    -webkit-box-shadow: inset 0 3px 20px 0 #cdcdcd;
    box-shadow: inset 0 3px 20px 0 #cdcdcd;
}

a[disabled].button,button[disabled] {
    cursor: not-allowed;
    opacity: 0.4;
    pointer-events: none;
    -webkit-touch-callout: none;
}

a.button:active:not([disabled]),button:active:not([disabled]) {
    background-color: transparent !important;
    color: #2a2a2a !important;
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
}
<button disabled="disabled">disabled!</button>
<button>click me!</button>
<a href="http://royansoft.com" disabled="disabled" class="button">test</a>
<a href="http://royansoft.com" class="button">test2</a>

需要解释一下。例如，这个想法/主旨是什么？为什么它需要比之前的答案更多的CSS内容？所有这些内容都是必要的吗？如果是必要的，原因是什么？ - Peter Mortensen
3

body{
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
}
a.disable{
  pointer-events: none;
  color: black;
  text-decoration: none;
}
<a href="https://example.com">Normal</a>
<a href="https://example.com" class="disable">Disable</a>

这个不起作用。pointer-events: none 只能阻止指针设备点击链接。通过按 Tab 键直到链接获得焦点，然后按下空格仍然会“点击”链接。 - undefined
2
我结合了多种方法，提供了更高级的disabled功能。 这里是一个代码片段，下面是代码。
这样可以提供多层防御，使标记为禁用的锚点实际上表现为禁用状态。
使用此方法，您可以获得一个无法：
  • 点击
  • 通过Tab键和回车键激活
  • 在切换到它时将焦点移动到下一个可聚焦元素
  • 如果随后启用该锚点，则会发出通知
 

  1. Include this CSS content, as it is the first line of defense. This assumes the selector you use is 'a.disabled'.

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

  2. Next, instantiate this class such as (with optional selector):

     $ ->
   new AnchorDisabler()

    Here is the CoffeeScript class:

     class AnchorDisabler
   constructor: (selector = 'a.disabled') ->
     $(selector).click(@onClick).keyup(@onKeyup).focus(@onFocus)

   isStillDisabled: (ev) =>
     ### since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event ###
     target = $(ev.target)
     return true if target.hasClass('disabled')
     return true if target.attr('disabled') is 'disabled'
     return false

   onFocus: (ev) =>
     ### if an attempt is made to focus on a disabled element, just move it along to the next focusable one. ###
     return unless @isStillDisabled(ev)

     focusables = $(':focusable')
     return unless focusables

     current = focusables.index(ev.target)
     next = (if focusables.eq(current + 1).length then focusables.eq(current + 1) else focusables.eq(0))

     next.focus() if next


   onClick: (ev) =>
     # disabled could be dynamically removed
     return unless @isStillDisabled(ev)

     ev.preventDefault()
     return false

   onKeyup: (ev) =>

     # 13 is the JavaScript key code for Enter. We are only interested in disabling that, so get out fast
     code = ev.keyCode or ev.which
     return unless code is 13

     # disabled could be dynamically removed
     return unless @isStillDisabled(ev)

     ev.preventDefault()
     return false
你好!!，答案与JS或其他任何内容无关，而是关于CSS！ - Mehdi Dehghani
1

这里演示
试试这个

$('html').on('click', 'a.Link', function(event){
    event.preventDefault();
});
1
你的代码沙盒不起作用了！这个链接在谷歌浏览器中仍然是激活的。 - Matt Byrne
为了修复这段代码，请交换传递给on()的前两个参数： $('html').on('click','a.Link',function(event){ event.preventDefault(); }); - 2C-B
1
你好！答案与JS或其他任何东西无关，而是关于CSS！ - Mehdi Dehghani
1
你还可以调整另一个元素的大小，以覆盖链接（使用正确的 z-index）：这将“吃掉”点击事件。
（我们偶然发现这一点，因为我们在进行“响应式”设计时遇到了问题，由于 H2 在移动浏览器窗口大小下覆盖了链接而导致它们突然失效。）
是的，但不适用于键盘导航。 - AndFisher
0
大部分这个页面上的答案都是错误的。截至2023年11月，你无法通过CSS禁用链接。
你可以通过设置，使得鼠标无法点击链接，但你仍然可以通过Tab键定位到链接上，然后按回车键，链接将会被“点击”。
示例： 

document.querySelectorAll('a').forEach(button => {
  button.addEventListener('click', (e) => console.log(e.target.textContent));
});
a {
    pointer-events: none;
}
<li><a href="#a">link A</a>
<li><a href="#b">link B</a>
<li><a href="#c">link C</a>

enter image description here

2个不完美的解决方案

  1. 你可以添加 tabIndex="-1"，这样你就无法通过Tab键访问链接。

    当然，如果你预先添加了这个属性，那么你就禁用了键盘用户的链接。如果你在运行时添加它，那么你并没有通过CSS禁用链接。

  2. 为每个链接创建一个伪链接元素，通过CSS隐藏其中一个或另一个。

document.querySelectorAll('a').forEach(button => {
  button.addEventListener('click', (e) => console.log(e.target.textContent));
});

const container = document.querySelector('#container');

document.querySelector('button').addEventListener('click', () => {
  container.classList.toggle('disable-links');
});
.disabled-link {
  text-decoration: underline;
  opacity: 25%;
}

.links .disabled-link {
  display: none;
}

.disable-links .disabled-link {
  display: initial;
}

.disable-links a {
  display: none;
}
<div id="container" class="links">
<li><a href="#a">link A</a><span class="disabled-link">link A</span>
<li><a href="#b">link B</a><span class="disabled-link">link B</span>
<li><a href="#c">link C</a><span class="disabled-link">link C</span>
</div>


<button type="button">enable/disable links</button>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接