Prevent blur() from running

Question

I have a bootstrap popover that becomes active on focus of an input. The popover contains a button in it to perform an ajax request.

I have a blur function that closes the popover if the user clicks away from the input:

$(document).on('blur','.open-popover',function(){        
    $(".popover").attr("style","");
    //and do other things too  
});

I am trying to prevent the blur function above from running if the user presses the button in the popover:

$(document).on('click','button',function(){
    //prevent the blur actions and 
    //do ajax stuff                                   
});

possible duplicate of [jQuery: fire click() before blur() event](http://stackoverflow.com/questions/10652852/jquery-fire-click-before-blur-event) — Alexey Lebedev, Jun 25 '15 at 22:05
I think http://stackoverflow.com/questions/13509484/can-i-prevent-blur-event-from-happening is a better candidate. — EyasSH, Jun 25 '15 at 22:08

score 2 · Answer 1 · edited Jun 25 '15 at 22:09

Have you looked at stopImmediatePropagation? If using jQuery, then event handlers are fired in the order that they are bound. Just bind the click before the blur, and run stopImmediatePropagation within the click event.

// bind click event first
$(document).on('click','button',function(event){
    // keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.
    event.stopImmediatePropagation();                            
});

// then attach blur
$(document).on('blur','.open-popover',function(){        
    $(".popover").attr("style","");
    //and do other things too  
});

Prevent blur() from running

1 Answers1