Firefox css 对 javascript blur 没有反应答案

【问题标题】：Firefox css doesn't react on javascript blurFirefox css 对 javascript blur 没有反应
【发布时间】：2020-03-18 05:29:05
【问题描述】：

我通过让用户关注这些菜单的“标签”来切换导航子菜单。像这样（简化代码）：

<ul>
 <li>
  <a href="javascript:void(0);" class="label">menu1</a>
  <div class="menu">Raz Dwa Trzy</div>
 </li>
 <li>
  <a href="javascript:void(0);" class="label">menu1</a>
  <div class="menu">Vier Fünf Sechs</div>
 </li>
</ul>

css 有点像这样：

.menu { max-height:0; }
.label:focus + .menu { max-height:200px; }

现在这在所有浏览器中都可以正常工作：标签是一个锚点，因此接受焦点；你点击它，菜单显示。要隐藏，请单击其他位置 = 模糊标签。
但是，希望第二次单击标签也可以隐藏菜单。所以我添加了这个脚本来覆盖正常的聚焦行为：

for (var i=0; i<menu_labels.length; i++) {
    menu_labels[i].addEventListener('mousedown', function(e){ 
        e.preventDefault();
        adjustFocus(this);
    });
}

function adjustFocus(elem) {
    if (elem === document.activeElement) {
        console.log('elem has focus, let\'s blur it'); 
        elem.blur();
    }
    else {
        console.log('elem has no focus, let\'s focus it'); 
        elem.focus();
    }
}

这在 Chrome 和 Edge 中效果很好。只是不在 Firefox 中。
不是脚本不模糊元素；您可以通过各种方式检查标签在技术上不再是活动元素。 Firefox 似乎没有相应地应用 css 规则，或者在焦点更改后似乎没有更新视图。
任何想法和想法都非常感谢。谢谢！！干杯

--- 编辑：似乎 preventDefault() 在 FF 中没有效果，我没有意识到这是实际问题。已报告此问题，但我没有找到任何最近的解决方法。对此进行进一步调查。

【问题讨论】：

不确定我是否理解您的问题：codepen.io/gc-nomade/pen/NWqMQyz 我认为 FF 或 Chrome 没有区别。
除非我们的 Firefox 表现不同 - 不，我试过你的 codepen 并且它们不同：在 Chrome 中，你可以打开和关闭菜单。单击一次，它们会折叠起来，单击第二次，它们会重新折叠起来。在 Firefox 中，它们会继续存在。你能确认你可以在FF中切换吗？在这种情况下，这将是我该死的 FF 开发者版的问题。
是的，控制台日志也会切换消息。我在 Windows 上有最新的 FF。 74.0（64 位）

标签： javascript css firefox onblur

【解决方案1】：

这似乎与我之前看到的其他 Mozilla 焦点/模糊优先级问题/错误有关。比如这个：Javascript - Firefox behavior blur by mouse click. Bug?

我建议的一种可能的解决方法是，而不是在上面的代码中调用 elem.blur();，而是关注一些屏幕外或不可见的元素，这会有效地模糊直到那时焦点所在的元素。

【讨论】：