title: Disable button's onclick() when window.onclick() fires
body: <p>In my application I have a button which is represented by -</p>
  
  <pre><code>&lt;div id="hamburgerIconId" class="hamburgerIcon"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>When I click on this button, it opens a side navigation box which is not visible initially. Clicking on the same button closes the side navigation box. The HTML of side navigation looks like this -</p>
  
  <pre><code>&lt;div id="pdAppSidenav" class="sidenav show-xs hidden-lg"&gt;
     &lt;a href="#"&gt;Life Insurance&lt;/a&gt;
     &lt;section id="cd-timeline" class="cd-container"&gt;
        BLAH BLAH BLAH
     &lt;/section&gt;
     &lt;!-- cd-timeline --&gt;
     &lt;div class="pd-content-bottom"&gt;
        &lt;h3&gt;HELP DESK &lt;/h3&gt;
        &lt;p&gt;Open 7am-5pm &lt;/p&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Also, I have set up a masking layer that becomes visible when the side navigation box is opened. This layer's is sandwiched between the side navigation box and the webpage. It basically is used to darken and disable the background when the sidenav is opened. Clicking anywhere on the screen should also close the sidenav</p>
  
  <p>The masking layer - </p>
  
  <pre><code>&lt;div id="left-nav-mask"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Below is my Javascript/Jquery code - </p>
  
  <pre><code>function leftnav() {
      var collapse_sidebar_modal = document.getElementById('pdAppSidenav');
      var collapse_sidebar_icon = document.getElementById("hamburgerIconId");
      var left_nav_mask = document.getElementById("left-nav-mask");
      var isOpen = false;
      collapse_sidebar_icon.onclick = function() {
          if (isOpen == false) {
              console.log(event.target);
              collapse_sidebar_modal.style.display = "block";
              collapse_sidebar_modal.style.width = "250px";
              left_nav_mask.style.display = "block";
              isOpen = true;
          } else {
              console.log(event.target);
              collapse_sidebar_modal.style.display = "none";
              collapse_sidebar_modal.style.width = "0px";
              isOpen = false;
          }
      }
  
  
      $(window).bind("click touchstart", function(event) {
              if (event.target == left_nav_mask &amp;&amp; isOpen == true) {
                  console.log(event.target);
                  left_nav_mask.style.display = "none";
                  collapse_sidebar_modal.style.display = "none";
                  collapse_sidebar_modal.style.width = "0px";
                  isOpen = false; 
              }
  
          });
  
  }
  </code></pre>
  
  <p>When I click on the button, it opens the sidenav, clicking it again closes the sidenav. Also, when the sidenav is open, clicking anywhere outside the sidenav closes it. </p>
  
  <p>Now, when I use the mobile emulator provided in Chrome's dev tools, clicking on the button while the sidenav is open does not close it. What happens is that the window.onclick fires and immediately after that the onclick function of the button fires.</p>
  
  <p>Does anyone know the solution to this issue?</p>