javascriptjqueryonclickonblur

Prevent onblur code to execute if clicked on submit button


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.


Solution

  • 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);
      });