点击另一个元素时不要失去焦点 [英] Don't lose focus when clicking another element

问题描述

我正在为一个项目编写一个小型的就地编辑器，但是为了保持专注和模糊，遇到了两个问题。我做了一个小提琴来解释我的问题：

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

<2>当 blur 时，工具栏应该消失。但是这会导致工具栏不起作用。如果您点击工具栏上的某些内容，会发生 blur 事件...当用户点击工具栏时，最好的做法是不要模糊。

在此先感谢，

Sebastian

解决方案

解决方案非常简单...只需添加一个超时保护菜单。 （b）

  protect：function（e）{
 e.preventDefault（）
 return setTimeout （300）
} 
  

I am coding a small "in-place-editor" for a project, but ran into two problems with keeping the focus and bluring. I made a fiddle to explain my problem better:

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

(1) When you click inside an contenteditable element, a small toolbar appears. When clicking the toolbar the element, which is currently under editing loses focus for a short time. Is there a way to circumvent that? (It's actually rather an UX problem)

(2) The toolbar should disappear when blur. But this causes the toolbar to not work. If you click something on the toolbar the blur event occurs... what is the (kinda) best practice to not blur when a user is clicking the toolbar?

Thanks in advance,

Sebastian

解决方案

The solution is pretty simple... just add an timeout to "protect the menu". Updated the fiddle.

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

这篇关于点击另一个元素时不要失去焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！