在鼠标按下时更改其内容时，元素不会将焦点放在 Firefox 上

Question

假设您有一个DIV 和一个TABINDEX，以便它可以接收焦点。 现在想象在mousedown 上，您更改了DIV 中包含的文本。在 Chrome 和 Edge 上，DIV 将成为焦点。但不是在 Firefox 上。

在 Firefox 上，DIV 中单击的文本节点似乎很重要。使用innerHTML 或textContent 销毁/替换它将不允许DIV 接收焦点。

这是一个小提琴：https://jsfiddle.net/gq52bj7o

HTML：

<div id="test" tabIndex="0">click here (on the text, not outside)</div>

JavaScript：

var testDiv = document.getElementById("test");
testDiv.addEventListener(
  "mousedown", 
  function ()
  {
   //testDiv.innerHTML = "why Firefox, why?"; // KO
   testDiv.textContent = "why Firefox, why?"; // KO
   //testDiv.firstChild.nodeValue = "why Firefox, why?"; // OK
  });

请注意，如果您保留现有的文本节点 (testDiv.firstChild.nodeValue = "why Firefox, why?";)，则所有操作都将按预期进行。此外，如果您在文本之外单击，DIV 也会获得焦点。

这正常吗？你将如何绕过这种行为（想象一个更大的应用程序更新点击元素的textContent 或innerHTML -- 在 Firefox 上会遇到焦点问题...）？

Answer 1

只需将“mousedown”事件更改为“focus”。在 Firefox 中工作。

testDiv.addEventListener(
    "focus", 
    function ()
  {
   testDiv.textContent = "why Firefox, why?";
  });