HTML5 Games by Jacob Seidelin

Author:Jacob Seidelin
Language: eng
Format: epub
ISBN: 9781118855454
Publisher: Wiley
Published: 2014-02-04T14:28:36+00:00

This short example simply prints the x and y coordinates in the corresponding input elements when you move your finger across the screen. Note that because it accesses only the first element of the touches list, this event works only with the first finger that touches the screen. As you see in the next section, however, working with multiple touch objects is also easy.

Multitouch

The touches array lists all active touches, and if more than one finger is touching the screen, you don't know which one is the relevant touch object. The event object provides two additional lists that you can use to get around this problem: targetTouches and changedTouches. The targetTouches list contains only the touch objects that are active on the target element. So, if a touchstart event fires on, say, a div element, the targetTouches list lists only the touch objects on that specific div, whereas the touches list might contain other, unrelated touch objects. The changedTouches list adds a further restriction and lists only the touch objects involved in that specific event. So, if you have two fingers on the div and move only one, the targetTouches list in the touchmove event contains both touch objects, but the changedTouches gives you only the one that moved.

The first example is a multitouch-enabled feature that lets you drag multiple elements around at the same time. Listing 8-3 shows the code, which you also can find in the file 03-multidrag.html. This file also includes a bit of CSS to style the two draggable elements.

Listing 8-3 Multitouch drag

<div id="dragme1"></div>

<div id="dragme2"></div>

<script>

var el1 = document.getElementById("dragme1"),

el2 = document.getElementById("dragme2");

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.