當點擊另一個元素時不要失去焦點

Question

我正在爲一個項目編寫一個小型「就地編輯器」，但遇到兩個問題需要保持專注和模糊。我做了一個小提琴解釋我的問題更好：

http://jsfiddle.net/distractedBySquirrels/ufbtC/

（1）當你點擊一個contenteditable元素中，會出現一個小工具欄。單擊工具欄時，正在編輯的元素短時間內失去焦點。有沒有辦法規避這種情況？ （這實際上是一個用戶體驗問題）

（2）當blur時，工具欄應該消失。但是這會導致工具欄無法工作。如果您單擊工具欄上的某個事件，則會發生blur事件...當用戶單擊工具欄時不模糊的最佳做法是什麼（有點）？

由於提前，

塞巴斯蒂安

Answer 1

的解決方案是非常簡單的...只是增加一個超時「保護菜單」。更新小提琴。

protect: function (e) { 
     e.preventDefault() 
     return setTimeout(300) 
    } 

Answer 2

你的道路上體面的所見即所得的編輯器遇到了深深的問題:)一個maaany的。

在CKEditor的，我們知道了解決方式：

1. focusManager - 首先我們註冊一個是編輯器的用戶界面的一部分元素。其次，我們聽取關於這些元素的模糊/焦點事件。第三，我們在模糊事件後等待一段時間，因爲重點可能會在它之後被解僱。第四，我們激發我們自定義的fire/blur事件（在編輯器實例上，而不是在DOM元素上），在這些事件上像工具欄監聽。

2. 我相信我們在CKEditor 4 beta中跳過了第二部分，它將選擇標記保持爲可編輯狀態。這是因爲在大多數瀏覽器中，即使在點擊工具欄後，選擇（甚至直觀地）仍保持可編輯狀態。也許這是因爲我們使用一些特殊的屬性/ JS代碼來防止移動選擇 - 不幸的是，我不知道。

3. 最後一件事是將選擇鎖定在可編輯狀態。當你將焦點移動到工具欄時，它不應該丟失，我相信IE和Opera在這裏失敗。所以我們在CKEDITOR.dom.selection中有特殊的方法來鎖定和恢復選擇。它們被可編輯的focus/blur上的聽衆使用。