Implicit and explicit capture

This test illustrates the difference between the implicit and explicit capture models in touch and pointer events.

Touch/click in the squares below and drag your finger/pointer outside of the square. Touch events, with their implicit capture, keep firing at the element (visualised by showing the touch coordinates), while pointer events stop firing once the pointer exits the element's boundaries, unless it's explicitly captured.

Note: in Pointer Events Level 2, implicit capture is now allowed for touch. This demo still shows the effect of explicit capture for mouse/stylus.

Basic pointer capture

foo.addEventListener('pointerdown', function(e) {
  ...
  this.setPointerCapture(e.pointerId);
  ...
} , false);