将具有偏移量的click事件传递给contentEditable

Question

我有一个div（.top）位于另一个div（.text）之上。如果单击.top，它应该隐藏，.text应该可以编辑。我也直接给.text。

不幸的是，光标始终处于开始状态。如果它已被直接点击，则光标将是用户点击的。

这是demo。

有没有办法将.top的click事件从正确的偏移量传递给.text（因为这似乎需要设置正确的光标位置）？

Answer 1

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

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

Answer 2

DIV正在点击Click事件。它不知道点击发生的位置。要做到这一点，你还必须跟踪鼠标事件。这本身并不难。

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

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

然后你必须找出它的位置并将光标移动到代码中。