Responding to the Touch Interface - HTML5 APPLICATIONS DEVELOPMENT MANUAL (2016)

HTML5 APPLICATIONS DEVELOPMENT MANUAL (2016)

31 - Responding to the Touch Interface

Devices with touch interfaces have screens that are developed specifically for sensing touch. There are two different types of touch screens:

- Capacitive touch screens

- Resistive touch screens

Processors treat touches like mouse gestures and relay that information to the operating system and application.

Returning at chapter 6 we recall finger moves are called gestures, and can include a press, tap, slide, and more. How an application responds to a gesture is called a touch event.

We can use JavaScript, including the touchstart, touchend, and touchmove methods to create touch events.

Tap

Left-click

Tap a finger on the screen

Double tap

Left double-click

Tapping a finger on the screen twice

Press and hold

Right-click

Press and hold a finger on the screen, then release

Selection/drag

Mouse drag (selection)

Drag a finger to the left or right

Zoom

CTRL + mouse wheel forward or backwards

Pinch an object inwards or outwards

You use the addEventListener method to attach an event handler to an HTML element, which can be a div, link, or anything you want. Using addEventListener lets you do something useful when an event is triggered.

Gesture events are triggered for multi-finger gestures. The main gesture events are:

- gesturestart: Every new two-finger gesture triggers a gesturestart event.

- gesturechange: When both fingers move around the screen, a gesturechange event occurs.

- gestureend: Lifting both fingers from the screen triggers a gestureend event.

The action an application takes in response to a gesture is called a touch event. You can use JavaScript to create touch events in touch-enabled apps. Developers can draw from a large set of input application programming interfaces (APIs) that work with touch screen data.

The primary JavaScript touch events are:

touchstart: Every new finger touch triggers a touchstart event.

touchmove: When a finger moves around the surface of the screen, a touchmove event occurs, which tracks the finger movement.

touchend: Lifting the finger from the screen triggers a touchend event.

touchcancel: The touchcancel event is triggered when the device launches another application.

In JavaScript, the touch object detects input from touch-enabled devices. You reference touch objects in the touchlist, which includes all of the points of contact with a touch screen.

A single tap has one entry in the touchlist, whereas a three-finger gesture would have a total of three entries. Touch objects are read-only and have the following properties:

- identifier: A unique identifier for the touch

- target: The HTML element that the touch affected

- clientx: Horizontal position, relative to browser window

- clienty: Vertical position, relative to browser window

- pagex: Horizontal position, relative to HTML document

- pagex: Vertical position, relative to HTML document

- screenx: Horizontal position, relative to the screen

- screeny: Vertical position, relative to the screen

- rotation: Indicates the amount of two-finger rotation that occurred. The value of the rotation is in degrees; positive values are clockwise, and negative values are counterclockwise.

Each touch event includes three different touchlists:

- touches: A list of all touch points currently in contact with the screen

- targetTouches: A list of touch points currently in contact with the screen and whose touchstart event occurred within the same node (inside the same target element as the current target element)

- changedTouches: A list of touch points that caused the current event to be fired; for example, in a touchend event, this is the finger that was removed

Detecting a Touch Screen

<!doctype html>

<html>

<head>

<title>Detect Touch Screen</title>

<meta charset="utf-8" />

<style type="text/css">

#canvas {

background-color: grey;

}

</style>

<script type="text/javascript">

document.addEventListener("DOMContentLoaded", init, false);

function init() {

var canvas = document.getElementById("canvas");

if ("ontouchstart" in document.documentElement) {

canvas.addEventListener("touchstart", detect, false);

}

else {

canvas.addEventListener("mousedown", detect, false);

}

}

function detect() {

if ("ontouchstart" in document.documentElement) {

alert("Touch screen device detected!");

}

else {

alert("No touch screen device detected.");

}

}

</script>

</head>

<body>

<canvas id="canvas" width="50" height="50"></canvas>

<br />

<p>Click the box to start touch screen detection.</p>

</body>

</html>