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>