javascript - 调用窗口模糊时避免元素模糊处理程序(浏览器失去焦点)

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 在返回焦点时有异常行为(错误？)。如果您聚焦输入，然后取消聚焦窗口，则会触发元素的模糊(这就是问题所在)。如果您返回输入以外的内容，则会触发 blur 事件第二次。