javascript - How to call an event handler on body tag only when all other event handlers fail? -

i have jquery script have written few event handlers on elements. if these 2 events not called, want event call. somehow i'm not able figure out way. used boolean variable doesn't seem work. here's sample code:

    $(function(){      var flag = false;      $("input[type=text]").blur(function () {             //some code             flag = true;         });      $("input[type=password]").blur(function () {            //some code            flag = true;         });          if(flag!= true)            $('body').click(function(event){             alert(event.target.tagname);            });         }       }); 

i want click event on body tag execute when first 2 event handlers not executed. know wrong. please suggest better way check. in advance.

in first handlers, accept event argument , call event.stoppropagation() prevent event bubbling document. along these lines (you mixing click , blur; i've used click consistently in below):

$(function() {      $("input[type=text]").click(function(event) {         event.stoppropagation();         //some code     });     $("input[type=password]").click(function(event) {         event.stoppropagation();         //some code     });      $('body').click(function(event) {         alert(event.target.tagname);     }); }); 

your flag approach work provided nothing ever stops propagation (which assumption wouldn't make), need reset flag, and code @ end putting if outside final event handler rather inside it. here's fix (again click consistently):

// works if nothing ever stops propagation $(function() {     var flag = false;      $("input[type=text]").click(function() {         //some code         flag = true;     });     $("input[type=password]").click(function() {         //some code         flag = true;     });      $('body').click(function(event) {         if (flag) {                     // check goes inside handler             flag = false;               // reset flag, otherwise don't         } else {             alert(event.target.tagname);         }     }); }); 

i don't think i'd way because seems fragile. here's example of working, though:

// works if nothing ever stops propagation  $(function() {      var flag = false;        $("input[type=text]").click(function() {          snippet.log("click on field " + this.name);          flag = true;      });      $("input[type=password]").click(function() {          snippet.log("click on field " + this.name);          flag = true;      });        $('body').click(function(event) {          if (flag) {                     // check goes inside handler              flag = false;               // reset flag, otherwise don't          } else {              snippet.log(                  "click on body, target tagname: " +                  event.target.tagname              );          }      });  });

<div>    <form>      <input type="text" name="text1">      <input type="text" name="text2">      <input type="password" name="password1">      <input type="password" name="password2">    </form>  </div>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <!-- script provides `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->  <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

actually, can use flag on actual event, solve problem of not having means of resetting if stops propagation:

$(function() {      $("input[type=text]").click(function(event) {         snippet.log("click on field " + this.name);         event.originalevent.handled = true;     });     $("input[type=password]").click(function(event) {         snippet.log("click on field " + this.name);         event.originalevent.handled = true;     });      $('body').click(function(event) {         if (!event.originalevent.handled) {             snippet.log(                 "click on body, target tagname: " +                 event.target.tagname             );         }     }); }); 

$(function() {        $("input[type=text]").click(function(event) {          snippet.log("click on field " + this.name);          event.originalevent.handled = true;      });      $("input[type=password]").click(function(event) {          snippet.log("click on field " + this.name);          event.originalevent.handled = true;      });        $('body').click(function(event) {          if (!event.originalevent.handled) {              snippet.log(                  "click on body, target tagname: " +                  event.target.tagname              );          }      });  });

<div>    <form>      <input type="text" name="text1">      <input type="text" name="text2">      <input type="password" name="password1">      <input type="password" name="password2">    </form>  </div>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <!-- script provides `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->  <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>