title: Is it possible to intercept/override all click events in the page?
body: <p>I've written an html5 application which is supposed to work on mobile devices. 90% of the time it works fine however in certain devices (mostly androids 4.0+) the click events fire twice. </p>
  
  <p>I know why that happens, I'm using <a href="http://cubiq.org/iscroll-4" rel="nofollow noreferrer">iScroll 4</a> to simulate native scrolling and it handles the events that happen inside the scroll.(line 533 dispatches the event if you're interested) Most of the time it works fine but in certain devices both the iScroll dispatched event and the original onClick event attached to the element are fired, so the click happens twice. I can't find a pattern on which devices this happen so I'm looking for alternatives  to prevent double clicks.</p>
  
  <p>I already came up with an ugly fix that solves the problem. I've wrapped all the clicks in a "handleClick" method, that is not allowed to run more often than 200ms. That became really tough to maintain. If I have dynamically generated content it becomes a huge mess and it gets worse when I try to pass objects as parameters. </p>
  
  <pre><code>var preventClick = false;
  
  function handleClick(myFunction){
  
     if (preventClick)
        return;
     setTimeout(function(){preventClick = true;},200);
  
     myFunction.call():
  }
  
   function myFunction(){
  
    ...
  
   }
  
  &lt;div onclick='handleClick(myfunction)'&gt; click me &lt;/div&gt;
  </code></pre>
  
  <p>I've been trying to find a way to intercept all click events in the whole page, and there somehow work out if the event should be fired or not. Is it possible to do something like that?</p>
  
  <p>Set myFunction on click but before it's called, trigger <code>handleClick()</code>? I'm playing with <a href="https://stackoverflow.com/questions/9671995/javascript-custom-event-listener">custom events</a> at the moment, it's looking promising but I'd like to not have to change every event in the whole application.</p>
  
  <pre><code>&lt;div onclick='myfunction()'&gt; click me &lt;/div&gt;
  </code></pre>