zepto处理touch事件

处理Touch事件能让你了解到用户的每一根手指的位置,在touch事件触发的时候产生，可以通过touch event handler的event对象取到,如果基于zepto.js开发，一般是通过event.touches[0]来获取属性。重要属性如下：clientX,clientY:触摸点相对于浏览器窗口viewport的位置;pageX,pageY: 触摸点相对于页面的位置;screenX,screenY：触摸点相对于屏幕的位置 ;identifier:touch对象的unique ID

 

方法/步骤

1.  

   你可以绑定以下四种Touch事件来了解基本的touch事件:

   touchstart:手指触摸屏幕上的时候触发

   touchmove:手指在屏幕上移动的时候触发

   touchend:手指从屏幕上拿起的时候触发

   touchcancel:系统取消touch事件的时候触发

2.  

   html：

   <div id="touch_test">

   <span class="clear">clear</span>

   <ul id="touchs">

   </ul>

   </div>

   css：

   #touchs{

   margin: 10px;width: 100px;height: auto;min-height: 100px;

   border:1px solid #c2ddb6;border-radius: 2px;background: #c2ddb6;

   }

   #touchs li {list-style: none;}

   .clear{

   margin-left: 10px;display:inline-block;height: 24px;width: 40px;color:#fff;

   font-size: 14px;line-height: 24px;background: #c2ddb6;text-align: center;

   }

   js：

   <script type="text/javascript" src="script/zepto.min.js"></script>

   <script type="text/javascript">

   ;(function($){

   $('#touchs').find('li').remove();

   $('#touchs').bind("touchstart",function(event){

   var touchpros =event.touches[0];

   console.log(touchpros);

   $('#touchs').append('<li>touchstart...</li>');

   });

   $('#touchs').bind("touchmove",function(){

   $('#touchs').append('<li>touchmove...</li>');

   });

   $('#touchs').bind("touchend",function(){

   $('#touchs').append('<li>touchend...</li>');

   });

   $('#touchs').bind("touchcancel",function(){

   $('#touchs').append('<li>touchcancel...</li>');

   });

   $('.clear').bind("click",function(){

   $('#touchs').find('li').remove();

   });

   })(Zepto);

   </script>

3.  

   当你触摸屏幕并抬起手指，只触发touchstart和touched。点击clear 可以清除本次测试的数据，可以再次测试。

   
4.  

   当如果手指触摸屏幕并移动后抬起会触发touchstart，多次touchmove,touchend或touchcanel

   
5.  

   可以根据基本的touch事件来封装成你想要实现复杂的效果，比如向左或向右滑动，

   向上或向下滑动，并在滑动时封装你想实现的效果。

   打开：https://github.com/madrobby/zepto/tree/master/src；

   touch.js封装好了滑动事件的处理，将其添加到自己的项目中，就可以直接调用向右、右、上、下滑动的事件。这样zepto.js官网手册中的例子就可以正常运行了。