Prevent other event handlers, from first handler, in jQuery

Question

I have input field and submit button on page.

<form id="searchform">
<input id="s" type="search" autocomplete="off" name="s" value="">
<div id="search-submit" class="input-group-addon">
    <i>SUBMIT</i>
</div>
</form>

and here is jQuery code:

var inProgress = false; 

$("#search-submit").on("click", function() {
    inProgress = true;
    alert ("Form Submit");
    inProgress = false;   
});

$("#s").blur(function () {
    if ( ! inProgress ) {
        alert ("Blur");
    inProgress = false; 
    }
});

I would like to prevent blur if clicked from input field to Submit div, but want to allow it if clicked from input field to some other part of page. I can't use button for submit.

I have put up the fiddle jsfiddle.net/405kzboh/1

But now I even don't understand why Click event is not triggered before the Blur event if someone click from input to Submit!

Blur event happens first, then click. – dfsq Feb 09 '15 at 13:46 — dfsq, Feb 09 '15 at 13:46

score 3 · Answer 1 · answered Feb 09 '15 at 13:59

The mousedown event on the target element will be called before the blur event on the textbox so you can hook into that event to set your in progress flag.

var inProgress = false; 

$("#search-submit").on("mousedown", function() {
    inProgress = true;
});

$("#search-submit").on("click", function() {
    console.log ("Form Submit");
    inProgress = false;   
});

$("#s").on("blur", function () {
    if ( ! inProgress ) {
        console.log ("Blur");
    }
});

I've updated the fiddle: http://jsfiddle.net/405kzboh/2/

score 0 · Answer 2 · answered Feb 09 '15 at 14:01

You can keep track of the events' timeStamps and use it as a condition in the if statement within the blur event handler. And you would have to delay the if statement somewhat so the click event can register. var inProgress = false; //Initialize var oEvent = {click:0,blur:0};

$("#search-submit").on("click", function(e) {
    //capture click timestamp
    oEvent[e.type] = e.timeStamp; 
    inProgress = true; 
    alert ("Form Submit");
    inProgress = false; 
});

$("#s").on("blur", function (e) {
    //capture blur timestamp
    oEvent[e.type] = e.timeStamp; 

    //delay this code so click can register
    setTimeout(function() { 

        //check if click happened after blur
        if ( ! inProgress && oEvent.click < oEvent.blur ) { 
            alert ("Blur");
            inProgress = false; 
        }
    }, 500);
});

DEMO

score 0 · Answer 3 · answered Feb 09 '15 at 14:05

Reference: http://stackoverflow.com/questions/10652852/jquery-fire-click-before-blur-event

Solution 1: stop event propogation in mousedown event, if you want to go with the click event

$("#search-submit").on("click", function() {      
    inProgress = true
    alert ("Form Submit");
    inProgress = false;      
});

$("#s").on("blur", function (e) {
    e.stopPropagation();
    if ( ! inProgress ) {
        alert ("Blur");
        inProgress = false; 
    }
});

$("#search-submit").on("mousedown", function(event) {  
    event.preventDefault();
});


Solution:2 -> use mousedown instead of click event

$("#search-submit").on("mousedown", function(event) {      
    inProgress = true;
    alert ("Form Submit");
    inProgress = false;  
    $("#s").off("blur");
});

$("#s").on("blur", function (e) {
    e.stopPropagation();
    if ( ! inProgress ) {
        alert ("Blur");
        inProgress = false; 
    }
});

score 0 · Answer 4 · answered Feb 09 '15 at 18:38

I didn't realize that Blur event fires before Click, so I need to use onMousedown event to catch the click on Div.

All the answers here are good, but more complicated than it should be, so I come out with my own solution:

$("#search-submit").on("mousedown", function(event) {
    event.preventDefault();
    console.log ("Form Submit");
});

$("#s").on("blur", function () {
    console.log ("Blur"); 
});

Updated Fiddle

Prevent other event handlers, from first handler, in jQuery

4 Answers4