Javascript 为什么在我更改innerHTML时firefox会选择文本

当我点击这个框时，Firefox会选择文本。如果div不为空，则不会选择文本。为什么呢

---

我不知道原因是什么，但有一个简单的解决办法。在div中放置一个

。您的代码如下所示：

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

---

那可能是一次点击。您可以尝试超时（免责声明：不建议使用内联代码）：

更新：但不是onclick-似乎单击是由Fx缓存的，并且在超时后仍然执行-我将保留答案以表明它不起作用：）

---

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

可能意味着FireFox有其他地方可以放置折叠的选择，因此它不会包装div

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

通过使用.blur（）方法或FireFox的一些实际选择方法，您可能可以绕过相同的问题。。。虽然

方法非常简单，但它非常优雅

---

顺便说一句，要发现非常奇怪的bug；）

我真的不知道为什么，但是你可以用css@peteris来阻止它，这是一个很好的解决方案，除了它完全删除了选择的功能，这可能不是我想要的。文本仍然为我选择。你确定这能帮你解决问题吗？是的，这很有效。我仍然在想为什么会发生这种情况。看起来firefox的行为很奇怪。

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

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