Question

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

它有一个文本输入
一旦这个文本输入被聚焦，它将在它下面显示一个带有一些信息和链接的div
这个div上面有很多p标签，还有一些标签。
当焦点超出整个组件时，它应该隐藏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属性。

然后我尝试了一个没有开心的解决方案（引用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

检测整个组件的focusOut

1 个答案: