如何防止BLUR事件多次触发？

Question

我有一些文本输入字段,如果用户更改一个值,然后模糊远离该文本字段,js将触发和ajax请求更新数据库中的该值.问题是我写了一个测试来触发这样的事件,我注意到内部'blur'事件通常在我输出输入字段后触发两到五次:

    $('input[type=text]').on('input propertychange paste', function() {
        $(this).on('blur', function () {
            console.log('blur');
        });
    });

即使我在捕获后立即关闭模糊事件处理程序,它仍然会触发两到三次.我怎么才能让它只发生一次？

Answer 1

只需跟踪hasFired布尔值:

var hasFired = false;
$('input[type=text]').on('input propertychange paste', function() {
    $(this).on('blur', function () {
        if(!hasFired){
            hasFired = true;
            console.log('blur');
        }
    });
});

实际上,这里真正的问题是你blur多次绑定事件.您可以使用上面的布尔值来防止:

var isBound = false;
$('input[type=text]').on('input propertychange paste', function() {
    if(!isBound){
        isBound = true;
        $(this).on('blur', function () {
            console.log('blur');
        });
    }
});