jquery - 单击另一个元素时不要失去焦点

Question

我正在为一个项目编写一个小型“就地编辑器”，但在保持焦点和模糊方面遇到了两个问题。我做了一个小提琴来更好地解释我的问题：

(1) 在元素内部单击时contenteditable，会出现一个小工具栏。单击工具栏时，当前正在编辑的元素会在短时间内失去焦点。有没有办法绕过它？（这实际上是一个用户体验问题）

(2) 工具栏应在时消失blur。但这会导致工具栏不起作用。如果您单击工具栏上的某些内容，blur则会发生事件......当用户单击工具栏时不模糊的（有点）最佳做法是什么？

提前致谢，

塞巴斯蒂安

score 4 · Accepted Answer

解决方案非常简单......只需添加一个超时来“保护菜单”。更新了小提琴。

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

score 1 · Accepted Answer

您遇到了严重的问题:) maaany 之一，正在通往体面的所见即所得编辑器的路上。

在 CKEditor 中，我们通过以下方式解决了它：

focusManager - 首先我们注册作为编辑器 UI 一部分的元素。其次，我们监听这些元素的模糊/焦点事件。第三，我们在模糊事件之后等待一段时间，因为焦点可能会在它之后被触发。第四，我们触发我们的自定义触发/模糊事件（在编辑器实例上，而不是在 DOM 元素上），工具栏之类的东西会在这些事件上监听。
第二部分，我相信我们在 CKEditor 4 beta 中跳过了，将选择标记保持在可编辑状态。这是因为在大多数浏览器中，选择（甚至是视觉上的）都保持在可编辑状态，即使在单击工具栏后也是如此。也许那是因为我们使用了一些特殊的属性/JS 代码来防止在那里移动选择 - 我不知道，不幸的是。
最后一件事是将选择锁定为可编辑。当您将焦点移到工具栏时，它不应该丢失，我相信 IE 和 Opera 在这里失败了。所以我们有特殊的方法CKEDITOR.dom.selection来锁定和恢复选择。它们由focus/blur可编辑的侦听器使用。

2 回答 2