在鼠标按下

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

只是改变＆＃34; mousedown＆＃34;事件到＃34;焦点＆＃34;。适用于Firefox。

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