Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WEBKIT    TOUCH     2011-07-03
mouseReference:http://www.quirksmode.org/blog/archives/2008/08/iphone_events.html
Moving your fingers	 	 is not the same as moving the mouse            mouse                                touch• touchstar...
Register handlers for multi-touch events in HTML as follows:<div  ontouchstart="touchStart(event);"  ontouchmove="touchMov...
touches/targetTouches/              changedTouchesget all touches on a page using the touches propertyget all touches for ...
Slide demo             <section class="slide">                       !    <div class="gallery">  using Touch events   !   ...
var imglist = X(.gallery li),ctrllist = X(.scrlCtrl li),startX,cIndex=0,cOffset=0;X(.slide).touchstart(function(e){&     st...
Bonus Tips          translateX/Y               translate3d(x,y,z)              iOS/android            position:fixed   andr...
Upcoming SlideShare
Loading in …5
×

Webkit核心移动浏览器上的touch事件处理

1,645 views

Published on

Published in: Technology
  • WONDERFUL JOB!.... STARTUPS...Send your pitchdeck to over 5700 of VC's and Angel's with just 1 click. Visit: Angelvisioninvestors.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Webkit核心移动浏览器上的touch事件处理

  1. 1. WEBKIT TOUCH 2011-07-03
  2. 2. mouseReference:http://www.quirksmode.org/blog/archives/2008/08/iphone_events.html
  3. 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. 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. 5. touches/targetTouches/ changedTouchesget all touches on a page using the touches propertyget all touches for the target element using the targetTouches propertyget all changed touches for this event using the changedTouches propertyget the location in page coordinates for a single-finger event:var x = event.touches[0].pageX;var y = event.touches[0].pageY;
  6. 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. 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. 8. Bonus Tips translateX/Y translate3d(x,y,z) iOS/android position:fixed android border-radiusiPhone option android css sprites 1pxiOS/android jsandroid meta viewport target-densityDpi=device-dpi dpi

×