Prevent onblur code to execute if clicked on submit button

Question

By the following code I wish to "DO SOMETHING" on "ONBLUR" of element id="eg1" only if the onblur event was not caused due to "ONCLICK" on the submit button.

    $(document).ready(function() {  
     $('#eg1').blur(function() {
      if(!($("#SubmitBut").click())) {
             //do something
      }
     });
    });

For Eg : if the user changes value of the “eg1” text field and clicks on the next text field then the DO SOMETHING code must run, but in case the user changes value of the the “eg1” field and then clicks on the SUBMIT button, then the DO SOMETHING code must not run.

Is it the correct way to do so ?? Please guide.

Answer 1

blur event of an element triggers before click event of another. So one way is to use mousedown and mouseup events to toggle a flag, because mousedown event of one element triggers before blur event of another one.

$("#eg1").on("blur", function(e){
  if($("#submit").data("mouseDown") != true){
      alert("DO SOMETHING");
  }
});

$("#submit").on("mousedown", function(e){
    $("#submit").data("mouseDown", true);
  });

$("#submit").on("mouseup", function(e){
    $("#submit").data("mouseDown", false);
  });

Answer 2

A trick -

 $(document).ready(function() {  
var flag = false;
     $('#eg1').blur(function() {
flag = true;
      if(!($("#SubmitBut").click())) {
if(flag) 
   return false;            
 //do something
      }
     });
    });

Answer 3

Update:

$('input[type="submit"]').mousedown(test);

Have a look at this fiddle JSFiddle to address your problem. Use the console to view the events triggered and suppressed after specific actions are performed.

You should suppress the event handler that is bound to the text when click or submit is performed.