如何檢測容器何時失去焦點

Question

我有一個容器（在一個窗體中）有一個表格佈局和一組編輯字段（文本，複選框等）。

我需要捕獲當用戶在容器外點擊（例如在一個菜單項上）。目前在容器上沒有事件處理程序。

Answer 1

在jQuery中您可以使用$('#container').blur(function() { //some code here });

Answer 2

使用jQuery，您可以使用.focusout()

$('#container').focusout(function() { /*do something*/ }); 

Answer 3

我知道這是一個老問題，但我最近遇到了同樣的問題，所以我想我會嘗試幫助任何同胞受害者。

我被困了幾個小時，創造了模糊和點擊事件監聽器的各種化身，似乎幾乎工作。即使焦點位於子元素上，模糊也會失敗，因爲它會觸發。點擊工作，但沒有處理鍵盤導航。

我最終的解決方案是在窗口級別捕獲焦點事件，並將焦點目標與我的容器進行比較，它是孩子。這隻適用於支持addEventListener的瀏覽器。在我的應用程序中，我有一個圈養的觀衆，並且不需要擔心IE < 9.

首先創建一個函數來檢查焦點目標是您的容器還是它的任何子元素。

var LocalTarget = function(el, target) 
{ 
    if (el === target) 
    { 
     return true; 
    } 
    else if (el.childNodes) 
    { 
     var els = el.childNodes; 

     for (var i = 0, n = els.length; i < n; i++) 
     { 
      if (els[i] === target) 
      { 
       return true; 
      } 
      else if (els[i].childNodes) 
      { 
       if (LocalTarget(els[i], target)) return true; 
      } 
     } 
    } 

    return false; 
}; 

請注意，這將通過遞歸比較容器中的所有節點。

接下來，創建一個偵聽器函數。

var Listener = function(e) 
{ 
    // Check if receiving element is part of the container. 
    if (!LocalTarget([YOUR CONTAINER], e.target)) 
    { 
     // Do focus lost stuff here... 

     // Remove the event listener. [OPTIONAL] 
     window.removeEventListener('focus', Listener, window, true); 
    } 
}; 

請注意，LocalTarget和Listener函數以及[YOUR CONTAINER]函數都是閉包。

最後，添加事件監聽器。

window.addEventListener('focus', Listener, window, true); 

雖然它似乎有很多工作要經過，而且開銷是瘋狂的，但這是我能做的唯一的調合物。希望它能幫助別人。