TouchList examples

/**
 * Example of the relations between different lists.
 */

document.getElementById('touchable').addEventListener('touchstart', function(ev) {

    if (ev.touches.item(0) == ev.targetTouches.item(0))
    {
        /**
         * If the first touch on the surface is also targeting the
         * "touchable" element, the code below should execute.
         * Since targetTouches is a subset of touches which covers the
         * entire surface, TouchEvent.touches >= TouchEvents.targetTouches
         * is /always/ true.
         */

        document.write('Hello Touch Events!');
    }

    if (ev.touches.length == ev.targetTouches.length)
    {
        /**
         * If all of the active touch points are on the "touchable"
         * element, the length properties should be the same.
         */

        document.write('All points are on target element')
    }

    if (ev.touches.length > 1)
    {
        /**
         * On a single touch input device, there can only be one point
         * of contact on the surface, so the following code can only
         * execute when the terminal supports multiple touches.
         */

        document.write('Hello Multiple Touch!');
    }

}, false);

/**
 * Example of changedTouches from a touchend event.
 */

document.getElementById('touchable').addEventListener('touchend', function(ev) {

    /**
     * Output in a example where three touch points are on the surface, two of
     * them being on the "touchable" element and when the touchend is triggered
     * by lifting one point from "touchable".
     *
     * Touch points removed: 1
     * Touch points left on element: 1
     * Touch points left on document: 2
     */

    document.write('Removed: ' + ev.changedTouches.length);
    document.write('Remaining on element: ' + ev.targetTouches.length);
    document.write('Remaining on document: ' + ev.touches.length);

}, false);