檢測整個組件

我正在寫一個建議部分，基本上將具有以下功能的事件的內容：檢測整個組件

它有一個文本輸入
一旦這個文本輸入被關注它會顯示下一個div它與一些信息和鏈接
這個div有很多p標籤和一些標籤。
當焦點超出整個組件它應該隱藏在div

我試着寫我的組件這樣的focusOut事件：

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

基本上，它會看看新的焦點項目（event.relatedTarget）位於我的組件的外部DIV中（它具有自動完成組類）。

這適用於Chrome，但不適用於Firefox和IE。事實證明，FF不會填充relatedTarget屬性。

然後我嘗試了一個解決方案，沒有讓e開心（引用here）。它並沒有讓我感到開心，因爲將一個事件掛鉤到整個文檔似乎並不正確。反正它沒有工作。

我的問題是如果有一個很好的，簡單的，跨瀏覽器的方式來簡單地檢測焦點是否出自我的整個組件。

來源

2015-01-12 Ricardo Acras

我只是檢查在activeElement在另一個runloop。到那時，渲染隊列將完成。 https://github.com/blessenm/ember-cli-bm-select/blob/master/addon/components/bm-select.js#L155 – blessenm

謝謝blessenm，你的解決方案對我來說工作得很好。 –

使用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

來源

2015-01-12 17:01:31 blessenm

檢測整個組件

回答

相關問題