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

Avoid element blur handler when window blur invoked (browser loses focus)

本文关键字：模糊 元素 处理 程序 焦点 窗口 调用 浏览器 失去      更新时间：2023-09-26

阐述这个问题：

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

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

为了实现这一目标，我尝试了几种策略，这是我目前的努力：

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

这行不通。似乎正在发生的事情是，当浏览器失去焦点时，该字段首先失去焦点。

好问题！

这是可能的，而且相当简单。

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

执行此操作的一种温和肮脏的方法可能是在采取行动之前使用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);
    });
}
相关文章：