title: Stop further event handlers on an element
body: <p>I'm writing a little jQuery extension that prevents a user from double clicking on a link.</p>
  
  <pre><code>$.fn.preventDoubleClick = function() {
      return this.click(function() {
          var $t = $(this)
              , retVal = $t.data('active')  // check the internal flag
          ;
          if (retVal || retVal === undefined) { // if ON...
              $t.data('active', false);  // set the internal flag to OFF
              setTimeout(function() {
                  $t.data('active', true);
              }, 1000);  // after 1 second, set the internal flag to ON
              console.log("allowed");
              return true;
          } else {  // if OFF...
              console.log("blocked");
              return false;
          }
      });
  };
  </code></pre>
  
  <p>the problem is that if there are other click event handlers on the elements, they still fire:</p>
  
  <pre><code>$('#myLink').click(function() {
      console.log("Clicked");
  });
  $('#myLink').preventDoubleClick();
  </code></pre>
  
  <p>And now when you double click the link, I get this in my log:</p>
  
  <blockquote>
    <p>allowed<br>
    clicked<br>
    blocked<br>
    clicked  </p>
  </blockquote>
  
  <p>So basically, I need the click function inside <code>preventDoubleClick</code> to stop all the other event handlers from firing. How can I do this?</p>