title: remove touch event handler on element using jQuery off()
body: <p>I'm playing with a JavaScript library based on jQuery that allows for touch gestures for mobile touch devices, <a href="https://github.com/dantipa/toe.js" rel="nofollow noreferrer">toe.js</a>.</p>
  
  <p>toe.js allows me to add a <code>tap</code> event, which is similar to a click event, so I enable <code>tap</code> for all current &amp; future <code>.button</code> elements:</p>
  
  <pre><code>$(document)
    .on('tap', '.button', function() {
      tapAction($(this));
    });
  
  function tapAction($btn) {
    // do stuff
    // disable all event handlers
    $btn.off();
  }
  </code></pre>
  
  <p>However, I can't figure out how to remove this event handler; <code>off()</code> isn't working... all the touch event handlers still exist on the element when I inspect it with Chrome's dev tools.</p>
  
  <p><img src="https://i.stack.imgur.com/xVBud.png" alt="event listeners"></p>
  
  <p>I can do <code>$(document).off()</code>, which works, but that also removes the events for all elements, both current &amp; future, which is not what I want :(</p>
  
  <p>I've looked through toe.js's source code, and I can't find a way to unbind the events. So how do I remove all of the element's event listeners, preferably using jQuery?</p>