Html 当我在远离元素的地方单击时，元素会聚焦-是否正确？

我创建了一个测试用例，其中一个元素具有

display:inline即使在我没有直接点击它的时候也会得到关注，并且使用
display:block显示元素不会以这种方式聚焦

重现问题的步骤：

打开
单击“测试1”容器
单击其他任何位置
预期结果：当单击任何空白或绿色区域时，“测试2”将不会聚焦。“测试2”只有在直接单击时才应聚焦

实际结果：即使鼠标单击与该容器无关的远处区域，“测试2”也会聚焦。但“测试1”并没有发生这种情况，“测试1”的行为在我看来与预期的一样

有人知道为什么会发生这种情况吗？当鼠标不直接点击时，我是否可以使“test2”容器不聚焦

更新：这仅在Chrome 35中发生，在Firefox 30中不发生。
指定包含Test2的div，如下所示：

<div>
    <a><div contenteditable="true">Test 2</div></a>
</div>


您忘记了JSIDLE中的JS部分；）Firefox的行为与您的“绿色文本”所解释的不一样。当我直接点击“测试2”时，我只看到它获得焦点。@Jenova70我用“javascript”标记它，因为答案很可能需要它，但演示代码是正确的。它不应该包含JavaScript。纯HTML/CSS在Chrome35中的表现与我类似。我得到的和Pointy得到的一样。这里是FF30，它的行为和它应该的完全一样。可能是开发人员扩展之类的其他原因导致了这种情况？您是否尝试重新启动浏览器？如果我在测试2之后放置另一个元素，它工作正常是的，但我需要链接上的
contenteditable
。否则，有人可能会删除该链接，而此特定位置必须始终只有一个带有可编辑文本的链接。将
contenteditable
放在DIV上可以使用户创建段落等。检查更新的答案。只需将可编辑的div放在“a”标记中即可。谢谢！如果我手动删除段落，则此解决方案将起作用。在看到它在其他浏览器中工作后，我开始认为这只是Chrome的bug/功能，也许应该保持这种状态，最好让Chrome开发者决定他们将来是否要改变它。