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

【问题标题】：Pass click event with offset to contentEditable将带有偏移量的点击事件传递给 contentEditable
【发布时间】：2011-04-08 21:24:53
【问题描述】：

我有一个位于另一个 div (.text) 之上的 div (.top)。如果单击.top，它应该隐藏并且.text 应该可以编辑。我也把焦点直接给.text。

不幸的是，光标总是在开头。如果它会被直接点击，那么光标将是用户点击过的地方。

这是demo。

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：