Graphics Reference
In-Depth Information
Additionally, the following events are available for touch screens:
touchstart • This event fires when the finger touches an element on the touch
screen.
touchmove • The touchmove event runs continuously when the finger
moves on the touchscreen after touchstart . This event can be used to
create functions such as drag & drop.
touchend • This event fires when the finger no longer has contact with the
touchscreen.
Be aware that with the touchstart event, the click event is also fired, but
touch events will not additionally run in the desktop environment. If you want
to activate an element in a composition with a click on both the desktop and on
a touch device like the iPad, it can easily happen that the function is performed
twice in a row on the touch device. You can prevent this on touch devices by
binding any further execution of the touchstart event so that no additional
click event is called. You can do this by running the preventDefault()
function on the event object in the touchstart event:
e.preventDefault();
This workaround is not appropriate in all cases because it can bind other
gestures, such as zooming and scrolling. If you want more control over touch be-
havior and other gestures, take a look at the Hammer.js JavaScript library, which
is also available as a jQuery plug-in, as well as in other formats. This extension
resolves many problems associated with dealing with gestures.
Figure 5.7
The external Hammer.js JavaScript
library provides a solid basis for gesture
recognition
 
Search WWH ::




Custom Search