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

Question

我有一個容器（在表單中），它有一個帶有一組編輯字段（文本、復選框等）的表格布局。

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

Answer 1

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

我被困了幾個小時，創建了各種模糊和點擊事件偵聽器的化身，它們似乎幾乎都可以工作。 模糊會失敗，因為即使焦點在子元素上它也會觸發。 單擊有效但不處理鍵盤導航。

我的最終解決方案是在窗口級別捕獲焦點事件，並將焦點目標與我的容器及其子項進行比較。 這僅適用於支持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 );

雖然看起來有很多工作要做，而且開銷也很瘋狂，但這是我唯一能做的混合物。 希望它可以幫助某人。

Answer 2

下面是使用的溶液事件的內容的事件， Node.contains方法和relatedTarget屬性。 這會偵聽包含元素上的 focusout 事件。 當相關目標不再是該包含元素的后代時，您就知道焦點已經超出了該元素。

let element = document.querySelector('.some-selector');
element.addEventListener('focusout', e => {
  if (! element.contains(e.relatedTarget)) {
    // Focus has left the element
  }
});

這在 IE11 中可能不起作用，因為IE11 僅部分支持 Node.contains 方法。

Answer 3

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