當我更改innerHTML時，為什么firefox會選擇文本

Question

<div style="float:left;width:100px;height:100px;border:1px solid black;" onclick="this.innerHTML = 'TEST';"></div>

當我點擊此框時，Firefox會選擇文本。 如果div不為空，則不選擇文本。 這是為什么？

演示

Answer 1

我不知道原因是什么，但有一個簡單的解決方案。 放一個  在div中。 您的代碼如下所示：

<div style="float:left;width:100px;height:100px;border:1px solid black;" onclick="this.innerHTML = 'TEST';">&nbsp;</div>

演示

Answer 2

這可能是onclick。 您可以嘗試超時（免責聲明：不建議使用內聯代碼）：

<div id="testDiv" style="float:left;width:100px;height:100px;border:1px solid black;" 
onclick="setTimeout(
  function() { 
    document.getElementById('testDiv').innerHTML = 'TEST';
  }
 ,10)"></div>

更新：但是不是onclick - 似乎點擊被Fx緩存並且在超時后仍然執行 - 我將留下答案以表明它不起作用:)

DEMO

Answer 3

這可能取決於瀏覽器選擇處理的工作方式。 如果你想象當你“點擊”你在那個位置創建一個折疊選擇（所有選擇都有一個起點和終點） - 這個折疊選擇可能包含div的開始和結束（從DOM的角度來看） 。 接下來，代碼直接在div中注入一些內容，這些內容將選擇結束點推到新文本之后......當瀏覽器重繪時，文本選擇會神奇地出現。 添加  可能意味着FireFox在其他地方放置了折疊選項，因此它不包裝div。

如果您曾嘗試構建自己的基於瀏覽器的WYSIWYG編輯器，您將會知道整個選擇過程對代碼的復雜程度。

您可以通過使用.blur（）方法或FireFox的一些實際選擇方法解決相同的問題...盡管  方法優雅，簡潔。

發現順便說一句非常奇怪的錯誤;​​）