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

【问题标题】：Avoid element blur handler when window blur invoked (browser loses focus)调用窗口模糊时避免元素模糊处理程序（浏览器失去焦点）
【发布时间】：2013-11-11 02:27:15
【问题描述】：

阐述问题：

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

我希望当浏览器失去焦点（窗口模糊）时不调用该处理程序。

为了实现这个目标，我尝试了几种方法，这是我目前的努力：

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

这不起作用。似乎正在发生的是，当浏览器失去焦点时，该字段首先失去焦点。

【问题讨论】：

jsfiddle.net/3sdDr

标签： javascript jquery html focus blur

【解决方案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 事件 second 时间。

【讨论】：

啊，我不知道activeElement。很高兴这很简单。我相信这是可行的，因为 activeElement 是当前聚焦的元素，所以当发生模糊并且字段仍然聚焦时，我们没有将焦点转移到其他地方。因此我们可以避免调用模糊处理程序。谢谢！

【解决方案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);
    });
}

【讨论】：