Javascript div，在焦点上展开，带有嵌套的输入元素。如何使div扩展持续关注输入焦点？

我有一个div，它有一个

tabindex

属性，允许它接收焦点，当它接收焦点时，它会通过一个JS事件侦听器进行扩展（以显示几个不同的选项），为它分配类

focus

。现在，嵌套在div中的是一个文本输入（用于让用户指定一个自定义值，而不是默认选项），当它接收到焦点时，div会触发一个模糊事件，但我不希望在这种情况下收缩div

你将如何着手解决这个问题

---

理想情况下，输入元素的模糊事件还将确定div是否是新的活动元素，在这种情况下，不会收缩div。

此解决方案有点不成熟，但它应该为遇到此问题的任何其他人提供一个有效的解决方案

.color picker

（要展开的div）有一个

tabindex

属性，允许它聚焦，并且

onfocus

它调用一个函数，将类焦点添加到相关元素中。此外，该函数还使用类

close color picker overlay

创建一个空div。该部门有：

• 一个

  位置：固定的
  底部
  ，
  左侧
  ，
  右侧
  和
  顶部
  样式都设置为0，使div覆盖整个页面
  z-index
  样式1小于
  .color picker.focus
  一个
  tabindex
  属性1多于
  。颜色选择器
  

这意味着，只要用户在

.color picker

之外单击或聚焦于其他内容（例如，通过单击选项卡），

.close color picker overlay

就会接收聚焦。对于该事件，有一个事件侦听器，它为

.color picker.focus

运行

querySelector

，并从找到的元素中删除类焦点。然后它从DOM中删除

。关闭颜色选择器覆盖

，将所有内容重置为原始状态

这样，聚焦嵌套在

.color picker

中的输入元素不会干扰任何内容

---

我还更清楚地说明了我是如何解决这个问题的（如果有人遇到过类似的问题）。

我在创建可聚焦上下文菜单时遇到了同样的问题。主要问题是，当focusout/blur触发时，下一个元素尚未聚焦，因此无法确定它是否是模糊元素的子元素。我想我可以延迟调焦功能，直到：

$('.something').on('blur', function() {
    var that = $(this);
    setTimeout(function() {
        if (that.has(document.activeElement).length)) {
            return;
        }
        // Some close logic.
        that.hide();
    }, 0),
});

---

setTimeout（fn，0）

计划在任何当前挂起的代码之后执行关闭逻辑（在本例中包括聚焦其他元素）。似乎至少在FF 18.0中对我有效；目前这里没有任何浏览器，但我认为它可能也适用于其他浏览器。

如果没有看到任何示例代码，您可以使用

reventDefault（）

来防止

preventDefault（）

不起作用，也可以使用

stopPropagation（）

。但问题似乎是，无论我如何调整冒泡，div上的blur事件总是在输入上的focus事件之前触发。这样我就无法在div的blur事件侦听器中获取

document.activeElement

。我会将此答案标记为已接受，因为通过此方法可以解决问题。但是，如果有人有一个更标准的解决方案，我很乐意听到：）事实证明，它与他们的上下文菜单（例如，让一个人通过里程碑过滤问题的菜单）非常相似。最大的区别是，它们只监听对overlay div的单击。