マウスのコンテンツを変更すると、要素が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を：あなたは、既存のテキストノード（testDiv.firstChild.nodeValue = "why Firefox, why?";）を保存する場合に予想されるように、すべてが動作することを

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 
    }); 

注意してください。また、テキストの外側をクリックすると、DIVもフォーカスを受け取ります。

これは正常ですか？この動作を回避するにはどうすればいいでしょうか？（クリックした要素のtextContentまたはinnerHTMLを更新する、より大きなアプリケーションを想像してください - フォーカスの問題はFirefoxで発生します...）？

Answer 1

"mousedown"イベントを "focus"に変更するだけです。 Firefoxで動作します。

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