Pointer-Events Not allowed 不会停止键盘输入答案

【问题标题】：Pointer-Events Not allowed doesn't stop keyboard inputsPointer-Events Not allowed 不会停止键盘输入
【发布时间】：2020-12-28 05:30:49
【问题描述】：

指针事件不会阻止键盘跳到下拉箭头并按空格键打开下拉菜单。是否有 CSS 来阻止键盘交互？下面是我试图阻止指针/键盘/光标与下拉列表交互的示例。它似乎在代码 sn-p 中有效，但在我的网站上无效。我正在使用chrome进行测试。使用引导程序 3。

.disabled{
   pointer-events: none !important;
    cursor: not-allowed !important;
    -moz-user-focus: none !important;
    -webkit-user-focus: none !important;
    -ms-user-focus: none !important;
    user-focus: none !important;
    -moz-user-modify: read-only !important;
    -webkit-user-modify: read-only !important;
    -ms-user-modify: read-only !important;
    user-modify: read-only !important;
    -moz-user-select: none !important;
    -webkit-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div><a href="#">Above Link</a></div>
<div class="btn-group disabled"><a href="#" class="btn btn-warning">Warning</a><a href="#" data-toggle="dropdown" class="btn btn-warning dropdown-toggle" aria-expanded="true"><span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li class="divider"></li><li><a href="#">Separated link</a></li></ul></div>  
<div><a href="#">After Link</a></div>

【问题讨论】：

tabIndex=-1。或者，您可以使用按钮而不是锚链接，然后像 here 一样将其设置为禁用。无论如何，使用按钮而不是 anchor 标签在语义上更正确（语义 HTML 仍然是一件事吗？）
语义永远是一回事。您可以通过应用正确的 aria 标签并应用 javascript 来接受来自键盘的 Spacebar 输入，使 anchor 标签显示为屏幕阅读器的按钮，但是当您可以使用 button 时，为什么还要做这些额外的工作呢。跨度>

标签： css twitter-bootstrap-3 less

【解决方案1】：

按钮组中的链接不会遵循按钮组的禁用设置，因为它们是链接；您不能禁用链接。即使你能找到一种破解方法让它在某个浏览器中运行（网上有很多），代码也永远不会得到普遍支持。

最好的方法是在按钮组中隐藏链接。

您可以创建 2 个看起来完全相同的链接。其中只有一个具有 'data-toggle="dropdown"' 属性。如果您希望禁用下拉菜单，请显示没有属性的链接并隐藏具有属性的链接。如果要启用下拉菜单，请执行相反的操作。

这是我能提供的最接近纯 CSS 的解决方案。

【讨论】：