避免元素模糊處理窗口模糊調用時（瀏覽器失去焦點）

Question

，闡述在這個問題：

我有點擊它時，收到一個子元素的元素。該子元素被賦予一個模糊處理程序。

我想要的是，當瀏覽器失去焦點時（窗口模糊），不會調用該處理程序。

爲實現這一目標，我已經嘗試了好釘子，這是我目前的工作：

function clicked() { 
    // generate a child element 
    ... 
    field = $(this).children(":first"); 
    $(window).blur(function() { 
     field.unbind("blur"); 
    }); 
    $(window).focus(function() { 
     field.focus(); 
     field.blur(function() { 
      save(this); 
     }); 
    }); 
    field.blur(function() { 
     save(this); 
    }); 
} 

這是行不通的。似乎正在發生的事情是，當瀏覽器失去焦點時，該領域首先失去了重點。

Answer 1

不錯的問題！

這是可能的，而且相當簡單。

field.blur(function() { 
    if(document.activeElement !== this) { 
     // this is a blur that isn't a window blur 
    } 
}); 

JSFiddle

或者香草JS：

field.addEventListener('blur', function() { 
    if(document.activeElement !== this) { 
     // this is a blur that isn't a window blur 
    } 
}); 

編輯：雖然與瀏覽器你的答案交易失去焦點，知道Firefox具有不同尋常的行爲返回時（錯誤？）專注。如果你有一個輸入焦點，然後把焦點放在窗口上，那麼元素的模糊會被觸發（這就是問題所在）。如果您返回到輸入以外的其他值，則模糊事件將被觸發秒時間。

Answer 2

一個稍微骯髒的方法可以在採取行動之前使用setTimeout()。

var windowFocus; 

$(window).focus(function() { 
    windowFocus = true; 
}); 

$(window).blur(function() { 
    windowFocus = false; 
}); 

function clicked() { 
    // generate a child element 
    ... 

    field = $(this).children(":first"); 

    field.blur(function() { 
     setTimeout(function() { 
      if (windowFocus) { 
       save(this); 
      } 
     }, 50); 
    }); 
}