Getting touchy

compatibility mouse events

(mouseenter) > mouseover > mousemove* > mousedown >
(focus) > mouseup > click

* only a single “sacrificial” mousemove event fired

on first tap

(mouseenter) > mouseover > mousemove >
    mousedown > (focus) > mouseup > click

subsequent taps

mousemove > mousedown > mouseup > click

tapping away

(mouseout) > (blur)

focus/blur only on focusable elements; subtle differences between browsers
Mobile/tablet touchscreen activation/tap event order

events fired on tap

touchstart > [touchmove]+ > touchend >
(mouseenter) > mouseover > mousemove > mousedown >
(focus) > mouseup > click

(mouse events only fired for single-finger tap)

on first tap

touchstart > [touchmove]+ > touchend >
(mouseenter) > mouseover > mousemove > mousedown >
(focus) > mouseup > click

subsequent taps

touchstart > [touchmove]+ > touchend >
mousemove > mousedown > mouseup > click

tapping away

mouseout > (mouseleave) > (blur)

Browser/Android 4.3

mouseover > mousemove > touchstart > touchend >
mousedown > mouseup > click

Browser/Blackberry PlayBook 2.0

touchstart > mouseover > mousemove > mousedown >
touchend > mouseup > click

UC Browser 10.8/Android 6

mouseover > mousemove > touchstart > (touchmove)+ > touchend >
mousedown > focus > mouseup > click

/* feature detection for touch events */

if ('ontouchstart' in window) {
    /* some clever stuff here */
}

/* older browsers have flaky support so more
   hacky tests needed...use Modernizr.touch or similar */

/* conditional "touch OR mouse/keyboard" event binding */

if ('ontouchstart' in window) {
  // set up event listeners for touch
  ...
} else {
  // set up event listeners for mouse/keyboard
  ...
}

/* feature detection for touch events */

if ('ontouchstart' in window) {
    /* browser supports touch events but user is
       not necessarily using touch (exclusively) */

    /* it could be a mobile, tablet, desktop, fridge ... */
}

Interaction Media Features

pointer / hover relate to “primary” pointing device
any-pointer / any-hover relate to all pointing devices

/* the primary input is ... */

@media (pointer: fine)   { /* a mouse, stylus, ... */ }
@media (pointer: coarse) { /* a touchscreen, ... */ }
@media (pointer: none)   { /* not a pointer (e.g. d-pad) */ }

@media (hover: hover) { /* hover-capable */ }
@media (hover: none)  { /* not hover-capable */ }

hover: on-demand / any-hover: on-demand removed in recent drafts

Interaction Media Features

pointer / hover relate to “primary” pointing device
any-pointer / any-hover relate to all pointing devices

/* across all detected pointing devices at least one is ... */

@media (any-pointer: fine)   { /* a mouse, stylus, ... */ }
@media (any-pointer: coarse) { /* a touchscreen, ... */ }
@media (any-pointer: none)   { /* none of them are pointers */ }

@media (any-hover: hover) { /* hover-capable */ }
@media (any-hover: none)  { /* none of them are hover-capable */ }

hover: on-demand / any-hover: on-demand removed in recent drafts

Media Features and JavaScript

if (window.matchMedia("(any-pointer:coarse)").matches) { ... }

/* listen for dynamic changes */

window.matchMedia("(any-pointer:coarse)")↵
      .onchange = function(e) { ... }

window.matchMedia("(any-pointer:coarse)")↵
      .addEventListener("change", function(e) { ... } , false }

window.matchMedia("(any-pointer:coarse)")↵
      .removeEventListener("change", function(e) { ... } , false }

/* Naive uses of Interaction Media Features */

@media (pointer: fine) {
    /* primary input has fine pointer precision...
       so make all buttons/controls small? */
}

@media (hover: hover) {
    /* primary input has hover...so we can rely on it? */
}

/* pointer and hover only check "primary" input, but
   what if there's a secondary input that lacks capabilities? */

/* Better uses of Interaction Media Features */

@media (any-pointer: coarse) {
    /* at least one input has coarse pointer precision...
       provide larger buttons/controls for touch  */
}

/* test for *any* "least capable" inputs (primary or not) */

@media (any-hover: none) {
    /* at least one input lacks hover capability...
       don't rely on it or avoid altogether */
}

Limitation: [mediaqueries-4] any-hover can't be used to detect mixed hover and non-hover capable pointers. Also, pointer/hover/any-pointer/any-hover don't cover non-pointer inputs (e.g. keyboards) – always assume non-hover-capable inputs

touch / mouse events delay

touchstart > [touchmove]+ > touchend >

[300ms delay]

(mouseenter) > mouseover > mousemove > mousedown >
(focus) > mouseup > click

/* DON'T DO THIS:
  conditional "touch OR mouse/keyboard" event binding */

if ('ontouchstart' in window) {
  // set up event listeners for touch
  foo.addEventListener('touchend', ...);
  ...
} else {
  // set up event listeners for mouse/keyboard
  foo.addEventListener('click', ...);
  ...
}

/* DO THIS:
   doubled-up "touch AND mouse/keyboard" event binding */

// set up event listeners for touch
foo.addEventListener('touchend', ...);

// set up event listeners for mouse/keyboard
foo.addEventListener('click', ...);

/* but this would fire our function twice for touch? */

patrickhlauke.github.io/touch/tests/event-listener_naive-event-doubling.html

/* DO THIS:
   doubled-up "touch AND mouse/keyboard" event binding */

// set up event listeners for touch
foo.addEventListener('touchend', function(e) {
  // prevent compatibility mouse events and click
  e.preventDefault();
  ...
});

// set up event listeners for mouse/keyboard
foo.addEventListener('click', ...);

patrickhlauke.github.io/touch/tests/event-listener_naive-event-doubling-fixed.html

events fired on tap

touchstart > [touchmove]+ > touchend >
(mouseenter) > mouseover >
mousemove* > mousedown > (focus) >
mouseup > click

* mouse event emulation fires only a single mousemove

too many touchmove events prevent mouse compatibility events after touchend

var posX, posY;

function positionHandler(e) {
    posX = e.clientX;
    posY = e.clientY;
}

canvas.addEventListener('mousemove', positionHandler, false);

var posX, posY;

function positionHandler(e) {
    posX = e.clientX;
    posY = e.clientY;
}

canvas.addEventListener('mousemove', positionHandler, false);
canvas.addEventListener('touchmove', positionHandler, false);

/* but this won't work for touch... */

interface MouseEvent : UIEvent {
    readonly attribute long screenX;
    readonly attribute long screenY;
    readonly attribute long clientX;
    readonly attribute long clientY;
    readonly attribute boolean ctrlKey;
    readonly attribute boolean shiftKey;
    readonly attribute boolean altKey;
    readonly attribute boolean metaKey;
    readonly attribute unsigned short button;
    readonly attribute EventTarget relatedTarget;
    // [DOM4] UI Events
    readonly attribute unsigned short buttons;
};

www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent

www.w3.org/TR/uievents/#events-mouseevents

partial interface MouseEvent {
    readonly attribute double screenX;
    readonly attribute double screenY;
    readonly attribute double pageX;
    readonly attribute double pageY;
    readonly attribute double clientX;
    readonly attribute double clientY;
    readonly attribute double x;
    readonly attribute double y;
    readonly attribute double offsetX;
    readonly attribute double offsetY;
};

www.w3.org/TR/cssom-view/#extensions-to-the-mouseevent-interface

interface TouchEvent : UIEvent {
    readonly attribute TouchList touches;
    readonly attribute TouchList targetTouches;
    readonly attribute TouchList changedTouches;
    readonly attribute boolean altKey;
    readonly attribute boolean metaKey;
    readonly attribute boolean ctrlKey;
    readonly attribute boolean shiftKey;
};

www.w3.org/TR/touch-events/#touchevent-interface

interface Touch {
    readonly attribute long identifier;
    readonly attribute EventTarget target;
    readonly attribute long screenX;
    readonly attribute long screenY;
    readonly attribute long clientX;
    readonly attribute long clientY;
    readonly attribute long pageX;
    readonly attribute long pageY;
};

www.w3.org/TR/touch-events/#touch-interface

(this has been amended/extended in later implementations – more on that later)

var posX, posY;

function positionHandler(e) {
    if ((e.clientX)&&(e.clientY)) {
        posX = e.clientX; posY = e.clientY;
    } else if (e.targetTouches) {
        posX = e.targetTouches[0].clientX;
        posY = e.targetTouches[0].clientY;
        e.preventDefault();
    }
}

canvas.addEventListener('mousemove', positionHandler, false );
canvas.addEventListener('touchmove', positionHandler, false );

/* Swipe detection from basic principles */

Δt = end.time - start.time;
Δx = end.x - start.x;
Δy = end.y - start.y;

if ((Δt > timeThreshold) || ((Δx + Δy) < distanceThreshold)) {
  /* too slow or movement too small */
} else {
  /* it's a swipe!
     - use Δx and Δy to determine direction
     - pythagoras √( Δx² + Δy² ) for distance
     - distance/Δt to determine speed */
}

Function.prototype.debounce = function (milliseconds, context) {
  var baseFunction = this, timer = null, wait = milliseconds;
  return function () {
    var self = context || this, args = arguments;
    function complete() {
      baseFunction.apply(self, args);
      timer = null;
    }
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(complete, wait);
  };
};

window.addEventListener('touchmove', myFunction.debounce(250));

Function.prototype.throttle = function (milliseconds, context) {
  var baseFunction = this, lastEventTimestamp = null,
      limit = milliseconds;
  return function () {
    var self = context || this, args = arguments, now = Date.now();
    if (!lastEventTimestamp || now - lastEventTimestamp >= limit) {
      lastEventTimestamp = now;
      baseFunction.apply(self, args);
    }
  };
};

window.addEventListener('touchmove', myFunction.throttle(250));

interface TouchEvent : UIEvent {
    readonly attribute TouchList touches;
    readonly attribute TouchList targetTouches;
    readonly attribute TouchList changedTouches;
    readonly attribute boolean altKey;
    readonly attribute boolean metaKey;
    readonly attribute boolean ctrlKey;
    readonly attribute boolean shiftKey;
};

www.w3.org/TR/touch-events/#touchevent-interface

/* iterate over relevant TouchList */

for (i=0; i<e.targetTouches.length; i++) {
    ...
    posX = e.targetTouches[i].clientX;
    posY = e.targetTouches[i].clientY;
    ...
}

/* iOS/Safari/WebView has gesture events for size/rotation,
not part of the W3C Touch Events spec */

/* gesturestart / gesturechange / gestureend */

foo.addEventListener('gesturechange', function(e) {
    /* e.scale
       e.rotation */

    /* values can be plugged directly into
       CSS transforms etc */
});

/* not supported in other browsers, but potentially
   useful for iOS exclusive content (hybrid apps/webviews) */

iOS Developer Library - Safari Web Content Guide - Handling gesture events

/* Pinch/rotation detection from basic principles */

Δx = x2 - x1;
Δy = y2 - y1;


/* pythagoras √( Δx² + Δy² ) to calculate distance */

Δd = Math.sqrt( (Δx * Δx) + (Δy * Δy) );


/* trigonometry to calculate angle */

α = Math.atan2( Δy, Δx );

Mozilla Developer Network: Math.atan2()

/* Extension to touch objects */

partial interface Touch {
  readonly  attribute float radiusX;
  readonly  attribute float radiusY;
  readonly  attribute float rotationAngle;
  readonly  attribute float force;
};

/* Touch Events – contact geometry */

partial interface Touch {
  readonly  attribute float radiusX;
  readonly  attribute float radiusY;
  readonly  attribute float rotationAngle;
  readonly  attribute float force;
};

/* Touch Events – force */

partial interface Touch {
  readonly  attribute float radiusX;
  readonly  attribute float radiusY;
  readonly  attribute float rotationAngle;
  readonly  attribute float force;
};

force: value in range 0 – 1. if no hardware support 0
(some devices, e.g. Nexus 10, "fake" force based on radiusX / radiusY)

interface Touch {
    readonly attribute long identifier;
    readonly attribute EventTarget target;
    readonly attribute long float screenX;
    readonly attribute long float screenY;
    readonly attribute long float clientX;
    readonly attribute long float clientY;
    readonly attribute long float pageX;
    readonly attribute long float pageY;
};

enum TouchType {
    "direct",
    "stylus"
};


interface Touch {
    ...
    readonly attribute float altitudeAngle;
    readonly attribute float azimuthAngle;
    readonly attribute TouchType touchType;
};

Safari/iOS 10.3 exposes tilt and distinguishes touch and stylus

github.com/w3c/touch-events/pull/81

w3c.github.io/touch-events/#touch-interface

events fired on tap (Edge)

mousemove* >
pointerover > mouseover >
pointerenter > mouseenter >
pointerdown > mousedown >
focus
gotpointercapture >
pointermove > mousemove >
pointerup > mouseup >
lostpointercapture >
click >
pointerout > mouseout >
pointerleave > mouseleave

mouse events fired “inline” with pointer events
(for a primary pointer, e.g. first finger on screen)

... when touch events also supported (Edge)

pointerover > pointerenter > pointerdown >
touchstart >
pointerup >
touchend >
mouseover > mouseenter > mousemove > mousedown >
focus >
mouseup >
click >
pointerout > pointerleave

Specific order of events is not defined in the spec in this case – will vary between browsers...
only problem if handling both pointer events and mouse events (which is nonsensical)

/* Pointer Events extend Mouse Events
   vs Touch Events and their new objects / TouchLists / Touches */

interface PointerEvent : MouseEvent {
    readonly attribute long pointerId;
    readonly attribute long width;
    readonly attribute long height;
    readonly attribute float pressure;
    readonly attribute float tangentialPressure; /* Level 2 */
    readonly attribute long tiltX;
    readonly attribute long tiltY;
    readonly attribute long twist; /* Level 2 */
    readonly attribute DOMString pointerType;
    readonly attribute boolean isPrimary;
}

/* plus all MouseEvent attributes: clientX, clientY, etc */

www.w3.org/TR/pointerevents/#pointerevent-interface

/* detecting pointer events support */

if (window.PointerEvent) {
    /* some clever stuff here but this covers
       touch, stylus, mouse, etc */
}

/* still listen to click for keyboard! */

/* detect maximum number of touch points */

if (navigator.maxTouchPoints > 0) {
    /* device with a touchscreen */
}

if (navigator.maxTouchPoints > 1) {
    /* multitouch-capable device */
}

"you can detect a touchscreen"
...but user may still use other input mechanisms

pointer / mouse events and delay

...
[300ms delay]
click
...

300ms delay just before click event

touch-action

what action should the browser handle?

touch-action: auto /* default */
touch-action: none
touch-action: pan-x
touch-action: pan-y
touch-action: manipulation /* pan/zoom */

touch-action: pan-x pan-y  /* can be combined */

www.w3.org/TR/pointerevents/#the-touch-action-css-property

only determines default touch action, does not stop compatibility mouse events nor click

Pointer Events Level 2

expanded set of values (useful for pull-to-refresh, carousels, etc)

touch-action: pan-left
touch-action: pan-right
touch-action: pan-up
touch-action: pan-down

touch-action: pan-left pan-down /* can be combined */
touch-action: pan-x pan-down    /* can be combined */

w3c.github.io/pointerevents/#the-touch-action-css-property

new values only determine allowed pan direction at the start of the interaction;
once panning starts, user can also move in opposite direction along same axis

/* touch events: separate handling */

foo.addEventListener('touchmove', ... , false);
foo.addEventListener('mousemove', ... , false);


/* pointer events: single listener for mouse, stylus, touch */

foo.addEventListener('pointermove', ... , false);

/* Reminder: Touch Events need separate code for x / y coords */

function positionHandler(e) {
    if ((e.clientX)&&(e.clientY)) {
        posX = e.clientX; posY = e.clientY;
    } else if (e.targetTouches) {
        posX = e.targetTouches[0].clientX;
        posY = e.targetTouches[0].clientY;
        ...
    }
}

canvas.addEventListener('mousemove', positionHandler, false );
canvas.addEventListener('touchmove', positionHandler, false );

/* Pointer Events extend Mouse Events */

foo.addEventListener('pointermove', function(e) {
    ...
    posX = e.clientX;
    posY = e.clientY;
    ...
}, false);

www.w3.org/TR/pointerevents/#pointerevent-interface

foo.addEventListener('pointermove', function(e) {
    ...
    switch(e.pointerType) {
        case 'mouse':
              ...
              break;
        case 'pen':
              ...
              break;
        case 'touch':
              ...
              break;
        default: /* future-proof */
    }
    ...
} , false);

/* in IE11/Edge, pointerType returns a string
   in IE10, the return type is long */

MSPOINTER_TYPE_TOUCH: 0x00000002
MSPOINTER_TYPE_PEN:   0x00000003
MSPOINTER_TYPE_MOUSE: 0x00000004

MSDN: IE Dev Center - API reference - pointerType property

/* only do something if it's a primary pointer
   (e.g. the first finger on the touchscreen) */

foo.addEventListener('pointermove', function(e) {
    if (e.isPrimary) {
      ...
    }
} , false);

/* PointerEvents don't have the handy TouchList objects,
   so we have to replicate something similar... */

var points = [];
switch (e.type) {
    case 'pointerdown':
          /* add to the array */
          break;
    case 'pointermove':
          /* update the relevant array entry's x and y */
          break;
    case 'pointerup':
    case 'pointercancel':
          /* remove the relevant array entry */
          break;
}

/* like iOS/Safari, IE/Edge have higher-level gestures,
   but these are not part of the W3C Pointer Events spec */

foo.addEventListener("MSGestureStart", ... , false)
foo.addEventListener("MSGestureEnd", ... , false)
foo.addEventListener("MSGestureChange", ... , false)
foo.addEventListener("MSInertiaStart", ... , false)
foo.addEventListener("MSGestureTap", ... , false)
foo.addEventListener("MSGestureHold", ... , false)

/* not supported in other browsers, but potentially
   useful for IE/Edge exclusive content
   (e.g. UWP packaged/hosted/hybrid web app);
   for web, replicate these from basic principles again... */

MSDN IE10 Developer Guide: Gesture object and events

/* Pointer Events - pressure */

interface PointerEvent : MouseEvent {
    readonly attribute long pointerId;
    readonly attribute long width;
    readonly attribute long height;
    readonly attribute float pressure;
    readonly attribute float tangentialPressure;
    readonly attribute long tiltX;
    readonly attribute long tiltY;
    readonly attribute long twist;
    readonly attribute DOMString pointerType;
    readonly attribute boolean isPrimary;
}

pressure: value in range 0 – 1. if no hardware support,
0.5 in active button state, 0 otherwise

/* Pointer Events - contact geometry */

interface PointerEvent : MouseEvent {
    readonly attribute long pointerId;
    readonly attribute long width;
    readonly attribute long height;
    readonly attribute float pressure;
    readonly attribute float tangentialPressure;
    readonly attribute long tiltX;
    readonly attribute long tiltY;
    readonly attribute long twist;
    readonly attribute DOMString pointerType;
    readonly attribute boolean isPrimary;
}

if hardware can't detect contact geometry, either 0 or "best guess"
(e.g. for mouse/stylus, return width / height of 1)

/* Pointer Events - tilt */

interface PointerEvent : MouseEvent {
    readonly attribute long pointerId;
    readonly attribute long width;
    readonly attribute long height;
    readonly attribute float pressure;
    readonly attribute float tangentialPressure;
    readonly attribute long tiltX;
    readonly attribute long tiltY;
    readonly attribute long twist;
    readonly attribute DOMString pointerType;
    readonly attribute boolean isPrimary;
}

tiltX/tiltY: value in degrees -90 – 90.
returns 0 if hardware does not support tilt

/* events related to pointer capture */

foo.addEventListener("gotpointercapture", ... , false)
foo.addEventListener("lostpointercapture", ... , false)

/* methods related to pointer capture */

element.setPointerCapture(pointerId)
element.releasePointerCapture(pointerId)

if (element.hasPointerCapture(pointerId)) { ... }

/* example of how to capture a pointer explicitly */

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

/* capture automatically released on pointerup / pointercancel
   or explicitly with releasePointerCapture() */

patrickhlauke.github.io/touch/tests/pointercapture.html

/* cover all cases (hat-tip Stu Cox) */

if (window.PointerEvent) {

    /* bind to Pointer Events: pointerdown, pointerup, etc */

} else {

    /* bind to mouse events: mousedown, mouseup, etc */

    if ('ontouchstart' in window) {
        /* bind to Touch Events: touchstart, touchend, etc */
    }
}

/* bind to keyboard / click  */

/* adding PEP from the jQuery CDN */

<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>


/* doesn't parse CSS, needs custom touch-action attribute
   (could inject this via custom JavaScript on load/mutation?) */

<button touch-action="none">...</div>

/* navigator.maxTouchPoints always returns 0
   (real value would require hardware integration) */

events fired on tap with PEP

pointerover > pointerenter > pointerdown >
touchstart >
pointerup > pointerout > pointerleave >
touchend >
mouseover > mouseenter > mousemove >
mousedown > mouseup >
click

essentially, relevant Pointer Events before touchstart and touchend

/* Hammer's high-level events example */

var element = document.getElementById('test_el');

var hammertime = new Hammer(element);

hammertime.on("swipe",
  function(event) {
    /* handle horizontal swipes */
});

myButton.addEventListener('touchstart', addHighlight, false);
myButton.addEventListener('touchend', removeHighlight, false);

myButton.addEventListener('mousedown', addHighlight, false);
myButton.addEventListener('mouseup', removeHighlight, false);

myButton.addEventListener('click', someFunction, false);

/* addHighlight/removeHighlight will fire twice for touch
  (first for touch, then for mouse compatibility events);
  can't use e.preventDefault(), as we want to rely on 'click' */

myButton.addEventListener('touchstart', addHighlight, false);
myButton.addEventListener('touchend', removeHighlight, false);

myButton.addEventListener('mousedown', function(e) {
  if (!e.sourceCapabilities.firesTouchEvents) {
    addHighlight(e);
  } }, false);
myButton.addEventListener('mouseup', function(e) {
  if (!e.sourceCapabilities.firesTouchEvents) {
    removeHighlight(e);
  } }, false);

myButton.addEventListener('click', someFunction, false);

/* same function for touch and mouse, but if mouse check if source
   input fires touch events (i.e. this is a mouse compat event) */

/* rough proof of concept that fires programmatic
   Pointer Events for each "pointable" (finger / tool) */

e = new PointerEvent('pointermove', {
    pointerId: ... , width: ... , height: ... ,
    pressure: ... , tiltX: ... , tiltY: ... ,
    pointerType: 'leap', isPrimary: false,
    clientX: ... , clientY: ... ,
    screenX: ... , screenY: ...
});

/* dispatch event to whatever element is at the coordinates
   (no support for pointer capture at this stage) */

document.elementFromPoint(x, y).dispatchEvent(e);