HTML5 APPLICATIONS DEVELOPMENT MANUAL (2016)

6 - Touch Interfaces and Gestures

Today’s mobile devices and many PC monitors incorporate touch-screen technology, which makes it easier for many users to interact with the devices and their programs. A simple finger tap selects an object or presses a button, a finger swipe scrolls a list of photos on the screen, and a pinch zooms out on an image.

Any finger move is referred to as a gesture, which can involve a single finger (one-touch, such as press, tap, press and hold, slide to pan, and so on) or a finger and a thumb (two-touch, such as a pinch and stretch or a turn to rotate). The action the application takes in response to a gesture is called a touch event.

You can use JavaScript to create touch events in touch enabled apps. In JavaScript, the three primary touch events are touchstart, touchend, and touchmove. We will learn more in chapter 31.

When developing any touch-enabled app, be sure to test for the following:

- Overall responsiveness and fluidity

- Tapping, pinching, rotating, and other common gestures

- Controlled scrolling

- Controlled panning

- Ability to disabled scrolling and panning

- Accuracy of snap points

- Unintended zooming or scrolling, especially in a multi-touch environment

- Proper touch event reaction, especially in a multi-touch environment

Designing and developing well-formed touch-enabled apps takes practice, and a lot of testing. If you don’t have a touch-screen device, you can use MouseTouch events and a touch-screen emulator or simulator. Try Microsoft Surface SDK and Runtime for Windows 7, or the Windows Simulator tool in Visual Studio 11. A touch-screen simulator or emulator imitates a system that only has touch capabilities. Several free emulators are available online.