Detect focusOut của toàn bộ thành phần

Question

Tôi đang viết một phần ý kiến ​​cho rằng về cơ bản sẽ có các chức năng sau:

• Nó có một đầu vào văn bản
• Khi nhập văn bản này được tập trung nó sẽ hiển thị một div dưới nó với một số thông tin và liên kết
• div này có nhiều thẻ p trên đó và một số thẻ.
• Khi tập trung đi ra khỏi thành phần TOÀN BỘ nó nên ẩn div

Tôi đã cố gắng để viết sự kiện focusOut của thành phần của tôi như thế này:

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

Về cơ bản nó sẽ thấy nếu mục tập trung mới (event.relatedTarget) nằm bên trong DIV bên ngoài của thành phần của tôi (có lớp tự động hoàn thành nhóm).

Tính năng này hoạt động tốt trên Chrome nhưng không hoạt động trên Firefox và IE. Nó chỉ ra rằng FF không điền thuộc tính relatedTarget.

Sau đó, tôi đã thử một giải pháp không làm cho hạnh phúc (trích dẫn here). Nó không làm tôi hạnh phúc vì việc gắn một sự kiện vào toàn bộ tài liệu dường như không đúng. Dù sao nó cũng không hoạt động.

Câu hỏi của tôi là nếu có một cách duyệt web đơn giản, tốt, chỉ đơn giản là phát hiện xem trọng tâm có nằm ngoài toàn bộ thành phần của tôi hay không.

Answer 1

Chạy mã trong một runloop mới sử dụng Em.run.later. Đây là mẫu mã cho một addons của tôi. Tôi đang ẩn một menu thả xuống khi lấy nét ra khỏi thành phần.

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

Chạy mã trong một runloop riêng sẽ đảm bảo rằng bạn sẽ nhận được một cách chính xác document.activeElement