不允许的指针事件不会停止键盘输入

问题描述

指针事件不会阻止键盘跳至下拉箭头并按下空格键以打开下拉菜单。是否有CSS来阻止键盘交互？以下是我尝试阻止指针/键盘/光标与下拉菜单交互的示例。它似乎可以在代码段中运行，但在我的网站上不起作用。我正在使用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>

解决方法

按钮组中的

链接不是链接的禁用设置，因为它们是链接；您不能禁用链接。即使您找到了一种在某些浏览器（有很多在线版本）中运行的骇人方法，也永远不会普遍支持该代码。

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

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

这是我可以提供的最接近纯CSS解决方案的

less twitter-bootstrap-3