4

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

JSFIDDLE ;

以下代码可以正常工作，直到在两次调用 blur 事件时整个页面都被模糊（移动到另一个选项卡、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

4

2 回答 2

2

这有点小技巧，但您可以使用超时来确保事件不会被触发两次：

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

小提琴

于 2013-06-18T13:35:19.323 回答
2

另一种可能的解决方法：

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;
    });
})();
于 2013-06-18T13:49:25.190 回答