HTML5 Touch Events

I. Why Use Touch Events?

Touch events are HTML5 events specific to mobile browsers, but this is certainly not the main reason to use them. Because click on mobile has significant delay (about 300ms), the 300ms delay comes from determining double-tap and long-press, because only when the default waiting time ends and it is determined that there are no subsequent actions will the click event be triggered. The delay of touch events is very short, using touch events can improve page response speed and bring better user experience.

II. Standard Touch Events

Touch Events in Webkit

Event Name	Description	Contains touches Array
touchstart	Touch starts (user places finger on screen)	Yes
touchmove	Touch point changes (user moves finger on screen without lifting)	Yes
touchend	Touch ends (user lifts finger from screen)	Yes
touchcancel	Touch is cancelled (touch is interrupted by something, such as a notification)	No

P.S. The touches array is an array of touch objects, touch objects carry the data we want

Properties of Touch Objects

Property	Description
identifier	Unique identifier for this touch, this value does not change as long as the user's finger remains on the screen
screenX	Distance of touch point relative to the left edge of the screen
screenY	Distance of touch point relative to the top of the screen
clientX	Distance of touch point relative to the left edge of the browser window
clientY	Distance of touch point relative to the top of the browser window
pageX	Distance of touch point relative to the left edge of the page
pageY	Distance of touch point relative to the top of the page
target	Get event source, similar to event.target

P.S. There are actually three more properties: radiusX/radiusY, rotationAngle, force but due to poor compatibility and differences in browser implementation, they are not introduced here

III. IE10 Touch Events

IE Pointer Events

Event Name	Description (on touch devices)
MSPointerDown	Touch starts
MSPointerMove	Touch point moves
MSPointerUp	Touch ends
MSPointerOver	Touch point moves into element, equivalent to mouseover
MSPointerOut	Touch point leaves element, equivalent to mouseout

P.S. IE calls it pointer events because this event has three trigger forms: mouse click, stylus tap and finger touch

MSPointerEvent Properties

Property	Description
hwTimestamp	Time when event was created (ms)
isPrimary	Identifies whether this pointer is the primary pointer
pointerId	Unique ID of the pointer (similar to identifier in touch events)
pointerType	An integer that identifies whether the event comes from mouse, stylus or finger
pressure	Pen pressure, 0-255, only available when inputting with stylus
rotation	Integer from 0-359, rotation of cursor (if supported)
tiltX/tiltY	Tilt of stylus, only supported when using stylus input

Detecting pointerType:

function handleEvent(event){
  switch(event.pointerType){
    case event.MSPOINTER_TYPE_TOUCH:
  //finger
  break;
case event.MSPOINTER_TYPE_PEN:
  //stylus
  break;
case event.MSPOINTER_TYPE_MOUSE:
  //mouse
  break;
 default:
   break;
  }
}
document.body.addEventListener("MSPointerDown", handleEvent, false);

Actually there is a simpler way to detect fingers: directly judge whether the touches array exists, for example:

document.addEventListener('MSPointerDown', function(e){
  switch(e.type){
    case 'touchstart':var startPos = e.touches ? e.touches[0].pageX : e.screenX;
    //...
  }
}, false);

IV. Encapsulated tap Event Source Code: (tap is click on mobile)

(function(){

    var TOUCHSTART, TOUCHEND;

    //normal touch events
    if (typeof(window.ontouchstart) != 'undefined') {
    
        TOUCHSTART = 'touchstart';
        TOUCHEND   = 'touchend';
    
    //microsoft touch events
    } else if (typeof(window.onmspointerdown) != 'undefined') {
        TOUCHSTART = 'MSPointerDown';
        TOUCHEND   = 'MSPointerUp';
    } else {
        TOUCHSTART = 'mousedown';
        TOUCHEND   = 'mouseup';
    }


    function NodeFacade(node){
    
        this._node = node;
    
    }

    NodeFacade.prototype.getDomNode = function() {
        return this._node;
    }

    NodeFacade.prototype.on = function(evt, callback, scope) {
    
        var scopeObj;
    
        if(!scope) {
            scopeObj = this._node;
        } else{
            scopeObj = scope;
        }

    
        if (evt === 'tap') {
            this._node.addEventListener(TOUCHSTART, function() {
                callback.apply(scope, arguments);
            });
        } else if (evt === 'tapend') {
            this._node.addEventListener(TOUCHEND, function() {
                callback.apply(scope, arguments);
            });
        } else {
            this._node.addEventListener(evt, function() {
                callback.apply(scope, arguments);
            });
        }
    
        return this;
    
    }

    window.$ = function(selector) {

        var node = document.querySelector(selector);

        if(node) {
            return new NodeFacade(node);
        } else {
            return null;
        }
    }


})();

P.S. The above source code comes from touch-interfaces.com

Reference Materials

• "HTML5 Touch Interface Design and Development"