以编程方式设置在锚点上时，焦点轮廓不显示

Question

我有一个应用程序，它在某些情况下以编程方式设置对元素的关注。大多数情况下，一切都很好，但当我将焦点设置在锚上时，例如$（"#link1"）.focus（），我在Firefox（v42.0）中看不到焦点轮廓。焦点在元素上，因为我可以跳到下一个元素并查看轮廓。当我返回时，我可以正确地看到原始元素上的轮廓。它在Chrome和IE上正常工作。

如果在设置焦点后，我切换到Firefox中的另一个选项卡并返回，则会显示轮廓。

当我调用focus（）时，元素似乎没有得到正确刷新。

HTML和JS/jQuery非常简单：

<a href="#" id="link1">Link 1</a>
<a href="#" id="link2">Link 2</a>
$("#link1").click(function(evt){
  evt.preventDefault();
  $("#link2").focus();
});

有人有什么想法吗？

http://jsfiddle.net/4xkh9y1o/1/

谢谢，

Steven

Answer 1

我遇到了同样的问题，我能说的最好的是这是一个浏览器错误。看起来，在Firefox呈现了一个非程序触发的焦点轮廓之前，它将无法显示程序触发焦点的轮廓。一旦显示了大纲，焦点大纲也将显示为程序触发的焦点。

注意，这并不局限于锚定元件。在我的情况下，它发生在<div tabindex="0">上。

我确实找到了一个解决方法：为焦点轮廓指定明确的样式：

.programmatically-focused:focus {
    outline: 1px dotted;
}

为了避免在其他浏览器中破坏默认的聚焦环样式，您可能需要将解决方法限制在Firefox：

@-moz-document url-prefix() {
    .programmatically-focused:focus {
        outline: 1px dotted;
    }
}

这种风格似乎与FF在我的环境中内置的焦点轮廓相匹配（Win7上的FF 43.0.1）。基于此页面，FF Mac似乎使用了相同的风格。它使用当前的文本颜色作为轮廓。

以下是您的变通方法的更新：http://jsfiddle.net/4xkh9y1o/4/