通過點擊事件與偏移量contentEditable

Question

我有一個div（.top）是在另一個div（.text）之上。如果.top被點擊，它應該隱藏並且.text應該可以編輯。我也直接把重點放在文字上。

不幸的是，遊標始終處於開頭。如果它被直接點擊，那麼光標會是用戶點擊的。

這是demo。

是否有一種方法可以將.top文件中的click事件傳遞給帶有正確偏移量的.text（因爲這似乎是設置正確的光標位置所必需的）？

Answer 1

我對此有兩個想法。首先通過切換類來改變可編輯版本的風格，而不是使用兩個div，其中一個禁用它，以避免這個問題。

另一個想法是在'捕捉階段'中附加一個點擊處理程序，而不是傳統的氣泡階段，以便事件繼續傳播並且編輯框獲得點擊。我不確定現在如何在jQuery中做到這一點。

Answer 2

點擊事件正在被DIV觸發。它不知道點擊發生在哪裏。要做到這一點，你必須跟蹤鼠標事件。這本身並不困難。

從鼠標x，y您可以計算DIV x，y並轉換座標。這也不難。

問題出現在DIV中的字符和點擊之間沒有直接的關聯。要做到這一點，你基本上需要插入一個元素到DIV中，並在文本中迭代它的位置，直到匹配大致的鼠標點擊位置。它可能不會完全匹配，因爲您沒有完全點擊字符的開頭或結尾。

然後，你必須弄清楚這是哪裏，並在代碼中移動光標。