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.

@Ravi : please help me with the correct way to accomplish the task — Palak Taneja, Mar 04 '13 at 07:17
@PalakTaneja: Please view the fiddle I have created. I have updated my previous answer after reading the question carefully. — D3V, Mar 04 '13 at 08:30

Diode · Accepted Answer · 2013-03-05T10:47:19.443

35

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

edited Mar 05 '13 at 10:47

answered Mar 04 '13 at 07:37

Diode

24,570
8
40
51

@Diode please tell will that work in mobile also? as mobile functionalities are tap or click functionalities so. – sanjeev shetty Nov 17 '16 at 05:03
are you using jQuery mobile ? – Diode Nov 17 '16 at 05:39

D3V · Answer 2 · 2013-03-04T08:50:25.443

0

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.

edited Mar 04 '13 at 08:50

answered Mar 04 '13 at 07:22

D3V

1,543
11
21

This is not something that i am looking for...,probably you dint get my problem correctly...Thank you for trying. – Palak Taneja Mar 04 '13 at 08:13

score 0 · Answer 3 · answered Mar 04 '13 at 07:33

0

A trick -

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

answered Mar 04 '13 at 07:33

A.T.

24,694
8
47
65

this does the same thing, captures 2 events at the same time which is not permitted. – Palak Taneja Mar 04 '13 at 08:09

score 0 · Answer 4 · answered Jul 06 '23 at 03:13

Answering this old question (since it came up for me first in Google). There was a more elegant solution described in this other S.O. question, which is to just call event.preventDefault() in the onMouseDown handler.

So in modern component frameworks:

<button onMouseDown={(e) => e.preventDefault()} /button>

Prevent onblur code to execute if clicked on submit button

4 Answers4

Linked