Javascript 鼠标焦点上没有轮廓，但键盘焦点上仍有轮廓？

当页面的元素具有焦点（例如链接或按钮）时，它们会显示一个大纲。我希望此大纲仅在键盘而不是鼠标为该元素提供焦点时显示

---

可以确定该元素是如何通过JavaScript获得焦点的吗？如果是这样，那么如何控制浏览器自己的大纲功能？

浏览器使用CSS

outline

属性来显示哪个元素具有焦点，您可能已经知道了。因此，在jQuery中，您可以使用：

$(document).ready(function() {
    $("body").on("mousedown", "*", function(e) {
        if (($(this).is(":focus") || $(this).is(e.target)) && $(this).css("outline-style") == "none") {
            $(this).css("outline", "none").on("blur", function() {
                $(this).off("blur").css("outline", "");
            });
        }
    });
});

说明：此函数查找任何元素上的

mousedown

事件。此事件是委派的，这意味着它将应用于页面上当前的元素以及将来动态创建的任何元素。当鼠标单击元素时，其CSS

outline

属性设置为

none

；轮廓被删除

目标元素为

blur

获取一个新的处理程序。当从元素获取焦点时，

outline

属性设置为空字符串（这将从元素的

style

属性中删除它），允许浏览器再次控制大纲。然后，元素删除自己的

blur

处理程序以释放内存。这样，一个元素只有在从键盘聚焦时才被勾勒出来

编辑

---

根据拉凯什下面的评论，我做了一个小小的改变。该函数现在可以检测是否已经设置了

大纲

，并将避免覆盖它

我能看到的一个简单方法是使用鼠标事件来防止焦点触发

$('#element').click(function(){
   $(this).blur();
});

这带来了一个潜在的问题，即您根本无法使用鼠标来选择元素。因此，您也可以只添加一个类并调整焦点样式

$('#element').click(function(){
   $(this).addClass('fromMouse');
});
$('#element').blur(function(){
  if($(this).hasClass('fromMouse'){
     $(this).removeClass('fromMouse');
  }
});

CSS

.fromMouse{
  outline: none;
}

:focus{
  outline: none;
}

.outline{
  outline: 2px solid rgba(200,120,120, 0.8);
}

CSS

.fromMouse{
  outline: none;
}

:focus{
  outline: none;
}

.outline{
  outline: 2px solid rgba(200,120,120, 0.8);
}

jQuery代码

$(function(){
  $('*').on('keydown.tab', function(e){
    /*
    TAB or Shift Tab, Aw.
    Add some more key code if you really want
    */
    if ( 9== e.which && this == e.target ){
      window.setTimeout( function(){
        $('.outline').removeClass('outline');
         $(document.activeElement).addClass('outline');
      }, 100 );
    }

  });

});

这个很好用。只有当元素使用键盘聚焦时，您才能获得轮廓（我只知道Tab和Shift Tab，您可以添加更多）

看到它在工作：

---

基于@theftprevention answer，一个更为定制的解决方案可以是：

$(function(){
    $('body')
    .on('focus', '*', function() {
        var e = $(this);
        if (!e.is('.focus-mouse')) {
            e.addClass('focus-keyboard');
        }
    })
    .on('mousedown', '*', function() {
        $(this).removeClass('focus-keyboard').addClass('focus-mouse');
    })
    .on('blur', '*', function() {
        $(this).removeClass('focus-keyboard').removeClass('focus-mouse');
    });
});

现在，您只需在CSS中使用.focus键盘和.focus鼠标类进行剪切

.focus-keyboard{
    background:#eeeeee;
}
.focus-mouse{
    outline: 0;
}

---

删除

大纲

对可访问性来说太糟糕了！理想情况下，聚焦环仅在用户打算使用键盘时显示

2018答案：使用。目前，W3C建议使用CSS设计键盘专用焦点。在主流浏览器支持它之前，您可以使用这个健壮的。它不需要添加额外的元素或更改

tabindex

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline-color: lightgreen;
}

---

我还写了一个更详细的演示，以防你需要更多的信息

若用户当前正在使用鼠标或键盘，则可以向正文中添加类以了解css

document.body.addEventListener('mousedown', function() {
  document.body.classList.add('using-mouse');
});
document.body.addEventListener('keydown', function() {
  document.body.classList.remove('using-mouse');
});

和css

:focus {
  outline: #08f auto 2px;
}

body.using-mouse :focus {
  outline: none;
}

---

如果你不知道从哪里开始，你可以看看CSS。只向输入元素添加css，并查看其工作原理。之后，你可以做一些更奇特的事情，以你想要的方式工作。+1表示独特的lastClick和lastKey。但是它看起来有点太长了。@RakeshJuyal好吧，通过删除空白和合并事件，它可以缩短很多，但这并不意味着它会更可读或更好：p最后一次单击和关键点似乎是解决这个问题的好方法。但是你需要钩住

mousedown

事件，而不是

单击

，这样它才能更好地工作（至少在Chrome中）。根据代码，我认为如果在我的html中有一些元素我正在使用outline，这段代码将永远删除它。你用我发布的小提琴测试过它吗？因为模糊处理程序会处理这个问题。当焦点在元素上丢失时，jQuery的

css（）

的一个特殊特性会删除元素的

轮廓。当设置为空白字符串时，CSS属性将从元素的
style
属性（如果存在）中删除。由于元素的
style
属性具有最高优先级，因此当从该属性中删除该属性时，其
outline
将恢复到以前定义的位置。是的，我尝试了JSFIDLE。请看，我添加了一个带有默认轮廓的div。点击它一次，它的轮廓就永远消失了。啊，我明白你的意思了。我修改了答案并编辑了我的答案。看看这对你是否有效，谢谢！这对我很有效，我正在寻找一种方法。。Hi@Rakesh Juyal，在上面的代码中，即使用户使用鼠标单击其他元素，大纲仍保留在最后一个选项卡元素上。在这种情况下，如何删除大纲？