javascript - 为什么我更改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 缓存并在超时后仍然执行 - 我将留下答案以表明它不起作用:)

演示

Answer 3

这可能取决于浏览器内选择处理的工作方式。如果您想象当您“单击”时会在该位置创建一个折叠选择（所有选择都有一个起点和终点） - 这个折叠选择可能包含 div 的起点和终点（从 DOM 角度来看）。接下来，代码直接在 div 中注入一些内容，将选择终点推送到新文本之后……当浏览器重绘时，文本选择神奇地出现了。添加 可能意味着 FireFox 在其他地方放置折叠的选择，因此它不会包装 div。

如果您曾经尝试构建自己的基于浏览器的 WYSIWYG 编辑器，您就会知道整个选择过程的编码有多复杂。

您可能可以通过使用 .blur() 方法或一些 FireFox 的实际选择方法来解决同样的问题……尽管该 方法很简单，但很优雅。

顺便说一句，发现非常奇怪的错误；）