1. WEBKIT
TOUCH
2011-07-03

2. mouse
Reference:
http://www.quirksmode.org/blog/archives/2008/08/iphone_events.html

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;

6. Slide demo <section class="slide">
! <div class="gallery">
using Touch events ! ! <ul>
! ! ! <li>
<a href=#><img/></a><a href=#><img/></a>
</li>
! ! ! <li>
<a href=#><img/></a><a href=#><img/></a>
</li>
! ! ! <li>
<a href=#><img/></a><a href=#><img/></a>
</li>
! ! ! <li>
<a href=#><img/></a><a href=#><img/></a>
</li>
! ! </ul>
! </div>
! <div class="scrlCtrl">
! ! <ul>
! ! ! <li class="active"></li><li></li><li></li><li></li>
! ! </ul>
! </div>
</section>

7. var imglist = X('.gallery li'),ctrllist = X('.scrlCtrl li'),startX,cIndex=0,cOffset=0;
X('.slide').touchstart(function(e){
& startX = e.targetTouches[0].pageX; // X
& imglist.css({webkitTransitionDuration:'0s'});
}).touchmove(function(e){
& //e.preventDefault(); // scroll
& var curX = e.targetTouches[0].pageX - startX; // move
& imglist.css({webkitTransform:'translate3d(' + (curX+cOffset) + 'px,0,0)'}); //imglist translate
}).touchend(function(e){
& var curX = e.changedTouches[0].pageX - startX;
& if(curX<-50&&cIndex<imglist.length-1){// to left
& & ctrllist[cIndex].className = '';
& & ctrllist[++cIndex].className = 'active';& &
& & cOffset = -640*cIndex; //iPhone4 640px
& & imglist.css({webkitTransform:'translate3d('+cOffset+'px,0,0)',webkitTransitionDuration:'.5s'});
& }
& else if(curX>50&&cIndex>0){//to right
& & ctrllist[cIndex].className = '';
& & ctrllist[--cIndex].className = 'active';&
& & cOffset = -640*cIndex;
& & imglist.css({webkitTransform:'translate3d('+cOffset+'px,0,0)',webkitTransitionDuration:'.5s'});
& }
& else{ // 50px
& & imglist.css({webkitTransform:'translate3d('+cOffset+'px,0,0)',webkitTransitionDuration:'.5s'});
& }
});

8. Bonus Tips
translateX/Y translate3d(x,y,z)
iOS/android position:fixed android border-radius
iPhone option android
css sprites 1px
iOS/android js
android meta viewport target-densityDpi=device-dpi
dpi