将带有偏移量的点击事件传递给 contentEditable

Question

我有一个div（ .top ）是另一个DIV（顶部.text ）。 如果单击.top它应该隐藏并且.text应该可以编辑。 我也直接给.text焦点。

不幸的是，光标总是在开头。 如果直接单击它，那么光标将是用户单击的位置。

这是一个演示。

有没有办法将点击事件从.top传递到具有正确偏移量的.text （因为这似乎是设置正确光标位置所必需的）？

Answer 1

对此我有两个想法。 首先通过切换类来更改可编辑版本的样式来避免该问题，而不是使用两个 div，您可以禁用其中一个。

另一个想法是在“捕获阶段”而不是更传统的气泡阶段附加一个点击处理程序，以便事件继续传播并且编辑框获得点击。 我现在不确定如何在 jQuery 中做到这一点。

Answer 2

DIV 正在触发 click 事件。 它不知道点击发生在哪里。 为此，您还必须跟踪鼠标事件。 这本身并不难。

从鼠标 x,y 您可以计算 DIV x,y 并转换坐标。 这也不难。

出现的问题是DIV中的字符和点击之间没有直接关联。 要做到这一点，您基本上需要将一个元素插入 DIV 并迭代它在文本中的位置，直到您匹配大致的鼠标单击位置。 它可能不是完全匹配的，因为您没有完全单击字符的开头或结尾。

然后你必须弄清楚这是在哪里并在代码中将光标移动到那里。