javascript - 当整个页面在谷歌浏览器中模糊时，模糊被触发两次

Question

我在网页中有由 jQuery 添加的动态 textarea，我必须为它们检测 blur 事件。

JSFIDDLE ;

以下代码可以正常工作，直到在两次调用模糊事件时整个页面都变得模糊(移动到另一个选项卡、按下 alt-tab 等)。

// I've already tried with another selector, parent of the textareas
// instead of document, but it's the same result.
$(document).on("blur", "textarea", function () {
    $("body").append("<br />Blured the " + (($(this).index() / 2) + 1) + " textarea.");
});

我正在寻找一种仅使用 on 函数的解决方案，不如下所示(在这种情况下，问题也存在):

var element = $("<textarea></textarea><br />");

element.on("blur", function () {
    $("body").append("<br />Blured the " + (($(this).index() / 2) + 1) + " textarea.");
});

...

JSFIDDLE ;

所以问题是，当文本区域获得焦点并且页面模糊时，模糊事件会被触发两次。

解决这个问题的方法是什么？

这是浏览器的问题吗？如何预防？

更新:它似乎只存在于 Google Chrome 中。

操作系统:Ubuntu 13.04

---

我已在此处报告此问题:http://code.google.com/p/chromium/issues/detail?id=253253

Answer 1

另一种可能的解决方法:

http://jsfiddle.net/tpRgf/4/

(function () {
    var lastActive;
    $(document).on("blur", "textarea", function () {
        if (lastActive === this) { return; }
            lastActive = this;
            $("body").append("<br />Blured the " + (($(this).index() / 2) + 1) + " textarea.");

    }).on('focus', "textarea", function () {
        lastActive = null;
    });
})();