当整个页面在Google Chrome中模糊时，模糊会被触发两次

Question

I have dynamic textarea s in the web page that are added by jQuery and I have to detect the blur event for them.

JSFIDDLE ;

The following code work fine until the entire page is blured (move to another tab, alt-tab press etc) when the blur event is called two times.

// 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.");
});

I am looking for a solution using only on function this way and not like bellow (in this case the issue exists too):

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

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

...

JSFIDDLE ;

So the issue is that when the textarea is focused and the page is blured the blur event is fired twice.

Which is the solution for this?

Is this a browser issue? How to prevent it?

Update: It seems that it is present only in Google Chrome .

OS: Ubuntu 13.04

---

I've reported the issue here: http://code.google.com/p/chromium/issues/detail?id=253253

Answer 1

It's a bit of a hack, but you can use a timeout to make sure the event isn't fired twice :

$("button").on("click", function () {
    $("#test").append("<textarea></textarea><br />");
});

$(document).on("blur", "textarea", function () {
    var self = $(this);
    if (! self.data('fired')) {
        $("body").append("<br />Blured the " + (($(this).index() / 2) + 1) + " textarea.");
    }
    self.data('fired', true);
    setTimeout(function() {
        self.data('fired', false);
    },0);
});

FIDDLE

Answer 2

An other possible workaround:

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