Capture JavaScript events “silently”

I am currently implementing a JavaScript framework. Here, I want to capture mouse and touch events on the page without other event handling being disturbed. For example:

DOM:

<div id='capturer' style='position: fixed, width: 100%; height: 100%'></div>
<button id='btn'>A Button</button>

JS (with jQuery):

$("#capturer").get(0).addEventListener("touchstart", onStart, true);
$("#capturer").get(0).addEventListener("touchmove",  onMove,  true);
$("#capturer").get(0).addEventListener("touchend",   onEnd,   true);

The gesture detection is done with onStart, onMove and onEnd. The problem occurs with code such as this:

$("#btn").click(function() { alert('button clicked'); });

This event is never executed – I would have thought that, without calling preventDefault or stopPropagation, the touch event would continue to trickle/bubble and at some point trigger the button click, but this doesn’t seem to be the case. Any ideas why? And any ideas how to capture events without disturbing other event behaviours?

Answer

If you only want to click trought the #capturer-Element you can use the pointer-events-property in css, but this solution won´t capture any touch-events on your #capturer-Element.

jQuery("#capturer").css({"pointer-events" : "none"});

NOTE: In this example you won´t get any event for your capturer. If you want to “catch” the touch-elements all over your document you can try capturing them on the body-element.

$("body").get(0).addEventListener("touchstart", onStart, true);
$("body").get(0).addEventListener("touchmove",  onMove,  true);
$("body").get(0).addEventListener("touchend",   onEnd,   true);

In this case you would get the move-events over the whole content and get your click-event on the button, too. You also saved a dom-element.