javascript - 当浏览器失去焦点时，Chrome(也许是 Safari？)在输入字段上触发 "blur"两次

Question

Here is an interesting jsfiddle.

在火狐浏览器中:

1. 运行 fiddle
2. 点击文本输入
3. 点击其他地方。应该说“1 模糊”。
4. 再次点击文本输入。
5. ALT-TAB 到另一个窗口。 Fiddle 现在应该说“2 个模糊”。

在 Chrome 中，第 5 步显示“3 个模糊”。当整个浏览器失去焦点时，会触发两个单独的“模糊”事件。这很有趣，因为这意味着在“模糊”处理程序中假设元素实际上在事件被分派(dispatch)之前获得焦点是不安全的；也就是说，失去焦点——从“焦点清晰”到“焦点不清晰”的转变——是事件发生的原因。当生成两个“模糊”事件时，在处理第二个事件期间不满足该条件，因为该元素已经不在焦点中。

那么这只是一个错误吗？有没有办法判断“模糊”事件是假的？

Answer 1

它触发两次的原因是 window.onblur。作为 javascript 捕获/冒泡过程的一部分，窗口模糊会触发该窗口中所有元素的模糊事件。您所需要做的就是测试事件目标是否为窗口。

var blurCount = 0;
var isTargetWindow = false;
$(window).blur(function(e){
    console.log(e.target);
    isTargetWindow = true;
});
$(window).focus(function(){
    isTargetWindow = false;
});
$('input').blur(function(e) {
    if(!isTargetWindow){         
       $('div').text(++blurCount + ' blurs');
    }
    console.log(e.target);
});

​ http://jsfiddle.net/pDYsM/4/