当浏览器失去焦点时，Chrome浏览器会在输入字段上触发两次“模糊”

Question

[Here is an interesting jsfiddle.

在Firefox中：

1. 运行小提琴
2. 单击文本输入
3. 单击其他位置。应该说“ 1模糊”。
4. 再次单击文本输入。
5. ALT-TAB到另一个窗口。小提琴现在应该说“ 2模糊”。

[在Chrome浏览器中，在第5步说“ 3模糊”。当整个浏览器失去焦点时，将触发两个单独的“模糊”事件。这很有趣，因为这意味着在“模糊”处理程序中假设元素在事件被调度之前实际上已经具有焦点是不安全的。也就是说，失去焦点-从“集中注意力”到“没有集中注意力”的过渡-是事件发生的原因。当生成two“模糊”事件时，在处理第二个事件期间不满足该条件，因为该元素已经不在焦点上。

所以这只是一个错误吗？有没有办法说出“模糊”事件是假的？

这里是一个有趣的jsfiddle。在Firefox中：运行小提琴在文本输入中单击。应该说“ 1模糊”。再次单击文本输入。 ALT-TAB到另一个窗口。小提琴应该...

Answer 1

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

Answer 2

这是已确认的Chrome错误。 See the Chromium Issue Tracker

Answer 3

跳过第二个模糊：

Answer 4

这可能不是您想听到的，但是唯一的方法似乎是手动跟踪元素是否集中。例如（fiddle here）：

Answer 5

我使用的是Windows 7的Chrome版本30.0.1599.101 m，此问题似乎已解决。

Answer 6

我也遇到了同样的情况，以上原因说明了为什么。就我而言，我只是想知道是否[一个模糊事件发生了。结果，我发现仅从模糊函数返回即可解决我的问题，并阻止了后续事件的触发。

   function handleEditGroup(id) {
        var groupLabelObject = $('#' + id);
        var originalText = groupLabelObject.text();

        groupLabelObject.attr('contenteditable', true)
            .focus().blur(function () {
                $(this).removeAttr('contenteditable');
                $(this).text($(this).text().substr(0, 60));

                if ($(this).text() != originalText) {
                    alert("Change Found");
                    return; //<--- Added this Return.
                }
            });
    }

Answer 7

使用angular-blur时，看起来有点奇怪的angularjs提供了一个更简单的解决方案；仅当您传入$ event对象时，才定义它：