title: jQuery: Trap all click events before they happen?
body: <p>On my page I have a lot of various elements which respond to click events.
  There are times when I need to block all clicks based on some global flag.
  Is there a way I can make this check in a centralized location?</p>
  
  <p>Right now in each event I check for the flag, for example:</p>
  
  <pre><code>var canClick = false; // Global flag
  
  // Sample click event:
  $("#someDiv").click(function(){
    if(!canClick) return;
  
    // Some stuff ...
  });
  </code></pre>
  
  <p>What I'd like to do is have one element which traps all click events <em>before</em> any other elements.  </p>
  
  <p>I tried doing it on <em>document</em> but these events only occur after the other click events.</p>
  
  <p>Example:</p>
  
  <pre><code>$("#someDiv").click(function(){ console.log("someDiv click"); });
  
  $(document).click(function(){ console.log("Document click"); });
  
  // When I click on the someDiv element it prints:
  &gt; someDiv click
  &gt; Document click
  </code></pre>
  
  <p>I also tried putting a full screen div on top of everything and using this to trap events but the problem there was that none of the clicks were being propagated through this full screen div.  Also I don't want to rely on creating extra elements to trap clicks as it feels a little hacky.</p>
  
  <p>Could I maybe overwrite the jQuery click function so that I can put my little check in there?</p>
  
  <p>Is there something obvious I'm missing here?</p>
  
  <p>Thanks for any help.</p>