检测整个组件的焦点

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 内（具有自动完成组 class）。

这在 Chrome 上运行良好，但在 Firefox 和 IE 上运行不佳。原来FF没有填relatedTarget属性.

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

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

Answer 1

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

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'),

运行将代码放在单独的运行循环中将确保您能够正确获得 document.activeElement

检测整个组件的焦点

Detect focusOut of entire component

ember.js