ember.js - 检测整个组件的focusOut

Question

我正在编写一个建议组件，它基本上具有以下功能:

它有一个文本输入

一旦此文本输入获得焦点，它将在其下方显示一个 div，其中包含一些信息和链接

这个 div 上有许多 p 标签和一些 a 标签。

当焦点离开整个组件时，它应该隐藏 div

我试图像这样编写我的组件的 focusOut 事件:

focusOut: function(event, view){
  if (!$.contains(this.$('.autocomplete-group')[0], event.relatedTarget))
    this.set('showingSuggestions', false)
}

基本上它会看到新的焦点项目(event.relatedTarget)是否在我的组件的外部 DIV 内(它有 autocomplete-group 类)。

这在 Chrome 上运行良好，但不适用于 Firefox 或 IE。事实证明，FF 并没有填充relatedTarget 属性。

然后我尝试了一个没有让 e 高兴的解决方案(引用 here)。这并没有让我高兴，因为将事件挂接到整个文档似乎不正确。无论如何它也不起作用。

我的问题是是否有一种好的、简单的、跨浏览器的方法来简单地检测焦点是否超出了我的整个组件。

Answer 1

使用 Em.run.later 在新的 runloop 中运行代码.这是我的插件的代码示例。当焦点离开组件时，我隐藏了一个下拉菜单。

lostFocus: function() {
    if(this.get('isOpen')) {
      Em.run.later(this, function() {
        var focussedElement = document.activeElement;
        var isFocussedOut = this.$().has(focussedElement).length === 0 
                && !this.$().is(focussedElement);

        if(isFocussedOut) {
          this.closeOptions({focus:false});
        }
      }, 0);
    }
  }.on('focusOut'),

在单独的 runloop 中运行代码将确保您将正确获取 document.activeElement