当我点击远离它时元素会聚焦 - 这是正确的吗？答案

【问题标题】：Element focuses when I click far away from it - is this correct?当我点击远离它时元素会聚焦 - 这是正确的吗？
【发布时间】：2014-07-14 21:45:27
【问题描述】：

我创建了一个测试用例，其中带有display: inline; 的元素即使我不直接单击它也会获得焦点，而带有display: block; 的元素不会以这种方式获得焦点。

重现问题的步骤：

预期结果：当点击任何空白或绿色区域时，“测试 2”将不会被聚焦。 “测试 2”只有在直接单击时才应获得焦点。

实际结果：即使鼠标单击与该容器无关的某个远处区域，“测试 2”也会获得焦点。不过，“测试 1”不会发生这种情况，而且“测试 1”的行为在我看来与预期的一样。

有谁知道为什么会发生这种情况，如果我可以让“测试 2”容器在鼠标不直接单击时不聚焦？

更新：这仅在 Chrome 35 中发生，而不在 Firefox 30 中发生。

【问题讨论】：

您忘记了 JSFidle 中的 JS 部分；)
Firefox 的行为与您的“绿色文本”所解释的不同。当我直接点击它时，我只看到“测试 2”获得焦点。
@Jenova70 我用“javascript”标记它，因为答案很可能需要它，但演示代码是正确的。它不应该包含 JavaScript。纯 HTML/CSS 在 Chrome 35 中对我来说就是这样。
我得到的和 Pointy 得到的一样。 FF30 在这里，它的行为与它应该的完全一样。也许其他诸如开发人员扩展之类的东西会导致这种情况？您是否尝试重新启动浏览器？
jsfiddle.net/xkfH6/1 如果我在测试 2 之后放置另一个元素，它可以正常工作

【解决方案1】：

指定包含Test2的div如下：

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

【讨论】：

是的，这可行，但我需要链接上的contenteditable。否则有人可能会删除该链接，并且该特定位置必须始终只有一个带有可编辑文本的链接。将contenteditable 放在 DIV 上将使用户能够创建段落等。
检查更新的答案。只需尝试将可编辑的 div 放在“a”标签内。
谢谢！如果我手动删除段落，那么此解决方案将起作用。在看到它在其他浏览器中工作后，我开始认为这只是 Chrome 的错误/功能，也许应该保持这种状态，最好让 Chrome 开发人员决定他们将来是否要改变它。