我添加了tabindex="0"以添加用户标签到此div的功能，并使用键盘与其进行互动。点击或点击Enter / space时，会显示弹出窗口div。它在点击标签时应用于div的焦点样式很好，但我注意到当用户点击div激活它时，焦点样式也会在那时应用到它。如果他们按住鼠标，则会对其应用焦点样式。
当用户选中此div时，我怎样才能为此.blur()提供视觉焦点，但在用户点击它时却不显示焦点？
我目前正在通过{{1}}移除焦点，但它仍然会闪现这种焦点样式，并且在用户按住鼠标时始终可见。
具有所需行为的类似界面是iCloud.com上的Pages应用程序。您可以使用Tab键将不同的图标聚焦在工具栏中，然后当您选择自己的名称并点击返回/空格时，会出现一个弹出窗口并删除对您姓名的关注。此时，名称文本颜色变为深灰色。如果您单击名称而不是使用键盘，则永远不会看到应用于您的名称的焦点，只有在弹出窗口时才会看到文本颜色更改。
答案 0 :(得分：1)
对于可聚焦元素，你应该总是使用tabindex =＆＃34; 0＆＃34;这样焦点就会以正确的DOM顺序发生 - 否则tabindex本身会导致额外的可用性/可访问性问题。
如果您希望它可以聚焦，那么您肯定希望在用户点击它时也能显示焦点轮廓，因为点击事件可以通过类似于键盘的辅助技术触发，并且您希望有视力的用户能够看到他们一直在哪里。
一种解决方案是将outline:0用于:focus和:active伪样式，然后使用您自己的背景图片来展示您想要的不同外观。
第二种解决方案，只应在弹出窗口没有可见关闭按钮的情况下使用，但通过单击弹出窗口外部或按键盘命令来解除，是检测使用鼠标然后模糊元素，以便删除焦点轮廓。
答案 1 :(得分：0)
自定义控件（例如自定义元素按钮）可以使用 :focus-visible 选择性地仅在键盘焦点上应用焦点指示器。
:focus-visible 就是你要找的