title: How to cancel single click event when double click event fires
body: <p>How do I cancel single click event when double click event fires?</p>
  
  <p>I have already looked at some related and I found something that works</p>
  
  <p><a href="https://stackoverflow.com/questions/1067464/need-to-cancel-click-mouseup-events-when-double-click-event-detected/1067484#1067484">Need to cancel click/mouseup events when double-click event detected</a></p>
  
  <pre><code>function singleClick(e) {
      // do something, "this" will be the DOM element
  }
  
  function doubleClick(e) {
      // do something, "this" will be the DOM element
  }
  
  $(selector).click(function(e) {
      var that = this;
      setTimeout(function() {
          var dblclick = parseInt($(that).data('double'), 10);
          if (dblclick &gt; 0) {
              $(that).data('double', dblclick-1);
          } else {
              singleClick.call(that, e);
          }
      }, 300);
  }).dblclick(function(e) {
      $(this).data('double', 2);
      doubleClick.call(this, e);
  });
  </code></pre>
  
  <p>However, if I use .on("click") instead of .click(), this code doesn't work.</p>
  
  <p>Any idea why this is? I have to use .on() so using .click() is not an option</p>