javascript - How to prevent BLUR event from firing multiple times? - Stack Overflow

admin管理员组

文章数量:1290264

I have certain text input fields where if users change a value and then blur away from that text field, the js will fire an ajax request to update that value in the db. The problem is that I wrote a test to get such an event to fire and I notice that the inner 'blur' event usually fires between two and five times after I tab out of the input field:

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

Even if I turn off the blur event handler right after catching it, it still fires two or three times. How do I get this to happen only once?

I have certain text input fields where if users change a value and then blur away from that text field, the js will fire an ajax request to update that value in the db. The problem is that I wrote a test to get such an event to fire and I notice that the inner 'blur' event usually fires between two and five times after I tab out of the input field:

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

Even if I turn off the blur event handler right after catching it, it still fires two or three times. How do I get this to happen only once?

• javascript
• jquery
• onblur

Share Improve this question Follow edited Aug 7, 2021 at 19:39 Krisztián Balla 20.4k1313 gold badges7676 silver badges9090 bronze badges asked May 18, 2015 at 19:29 Joel Joel BinksJoel Joel Binks 1,67655 gold badges2828 silver badges4848 bronze badges 3

• 1 The reason it is firing multiple times is because you place another copy of the blur handler on the input element every single time you make a change to the value of said element. – thewatcheruatu Commented May 18, 2015 at 19:36
• So why do you bind blur event inside 'input propertychange paste' events??? – A. Wolff Commented May 18, 2015 at 19:44
• because I only want to fire the event once the field has been edited and the user has tabbed out of that field. If I just catch the first event, any time I type in a new letter it will fire. – Joel Joel Binks Commented May 18, 2015 at 20:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Just keep track of a hasFired boolean:

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

Actually, the real problem here is that you're binding the blur event multiple times. You can use a boolean like above to prevent that:

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

Another solution would be is to create a class for those elements that already bound by that event.

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

本文标签： javascriptHow to prevent BLUR event from firing multiple timesStack Overflow