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

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事件.