如何防止 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');
        });
    }
});

Answer 2

另一种解决方案是为那些已经受该事件绑定的元素创建 class。

$('input[type=text]').on('input propertychange paste', function() {
    if(!$(this).hasClass("bound")) {
      $(this).on('blur', function () {
         $(this).addClass("bound");
         console.log('blur');
      });
    }
});

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

How to prevent BLUR event from firing multiple times?

javascript

jquery

onblur