调用窗口模糊时避免使用元素模糊处理程序（浏览器失去焦点）

阐述这个问题：

我有一个元素，当点击时会收到一个子元素。 该子元素被赋予模糊处理程序。

我想要的是，当浏览器失去焦点时（窗口模糊），不要调用该处理程序。

为了达到这个目标，我尝试了几个方法，这是我目前的努力：

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在返回焦点时有不寻常的行为（错误？）。 如果您有一个聚焦的输入，然后将窗口取消聚焦，则会触发元素的模糊（这就是问题所在）。 如果返回到输入以外的其他内容，则会再次触发blur事件。

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); }); }