Detect focusOut całego komponentu

Question

Piszę składnik sugestie, że w zasadzie będzie mieć następujące funkcje:

• Ma wprowadzania tekstu
• Po tym wprowadzania tekstu zostanie skoncentrowany pokaże się pod div to z pewnymi informacjami i linkami
• Ten div ma wiele tagów p, a niektóre znaczniki.
• Gdy ostrość wychodzi cały element powinien ukryć div

Próbowałem napisać zdarzenie focusOut mojego składnika takiego:

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

Zasadniczo będzie to sprawdzić, czy nowy skupiony element (event.relatedTarget) znajduje się wewnątrz zewnętrznego DIV mojego komponentu (który ma klasę autouzupełniania-grupy).

Działa to dobrze w przeglądarce Chrome, ale nie w przeglądarce Firefox ani IE. Okazuje się, że FF nie wypełnia powiązanej właściwości TARGET.

Potem próbowałem rozwiązania, które nie sprawiło, że jestem szczęśliwy (cytowany here). Nie uszczęśliwiło mnie to, ponieważ podpięcie zdarzenia do całego dokumentu nie wydaje się właściwe. W każdym razie to nie działało tak dobrze.

Moje pytanie brzmi: czy istnieje dobry, prosty, oparty na przeglądarce sposób, aby po prostu wykryć, czy fokus zniknął z całego mojego komponentu.

Answer 1

Uruchom kod w nowym runloop, używając Em.run.later. Oto przykład kodu dla jednego z moich dodatków. Ukrywam menu rozwijane, gdy fokus zniknie z komponentu.

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

Uruchamianie kodu w osobnym runloop zapewni, że dostaniesz document.activeElement poprawnie