3. Moving your fingers
is not the same as moving the mouse
mouse
touch
• touchstart – triggered when a touch is initiated. Mouse equivalent –
mouseDown
• touchmove – triggered when a touch moves. Mouse equivalent – mouseMove
• touchend – triggered when a touch ends. Mouse equivalent – mouseUp.
• touchcancel – triggered when a touch leaves the the region that is listening,
e.g., when a finger that is in contact with the screen moves off-screen (iOS
only)
4. Register handlers for multi-touch events in HTML as follows:
<div
ontouchstart="touchStart(event);"
ontouchmove="touchMove(event);"
ontouchend="touchEnd(event);"
ontouchcancel="touchCancel(event);"
></div>
Alternatively, register handlers in JavaScript as follows:
element.addEventListener("touchstart",
touchStart, false);
element.addEventListener("touchmove", touchMove,
false);
element.addEventListener("touchend", touchEnd,
false);
element.addEventListener("touchcancel",
touchCancel, false);
5. touches/targetTouches/
changedTouches
get all touches on a page using the touches property
get all touches for the target element using the targetTouches property
get all changed touches for this event using the changedTouches property
get the location in page coordinates for a single-finger event:
var x = event.touches[0].pageX;
var y = event.touches[0].pageY;
