处 理Touch事件能让你了解到用户的每一根手指的位置,在touch事件触发的时候产生，可以通过touch event handler的event对象取到,如果基于zepto.js开发，一般是通过event.touches[0]来获取属性。重要属性如 下：clientX,clientY:触摸点相对于浏览器窗口viewport的位置;pageX,pageY: 触摸点相对于页面的位置;screenX,screenY：触摸点相对于屏幕的位置 ;identifier:touch对象的unique ID
方法/步骤
-
你可以绑定以下四种Touch事件来了解基本的touch事件:
touchstart:手指触摸屏幕上的时候触发
touchmove:手指在屏幕上移动的时候触发
touchend:手指从屏幕上拿起的时候触发
touchcancel:系统取消touch事件的时候触发
-
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>
-
当你触摸屏幕并抬起手指，只触发touchstart和touched。点击clear 可以清除本次测试的数据，可以再次测试。
-
当如果手指触摸屏幕并移动后抬起会触发touchstart，多次touchmove,touchend或touchcanel
-
可以根据基本的touch事件来封装成你想要实现复杂的效果，比如向左或向右滑动，
向上或向下滑动，并在滑动时封装你想实现的效果。
打开：https://github.com/madrobby/zepto/tree/master/src；
touch.js封装好了滑动事件的处理，将其添加到自己的项目中，就可以直接调用向右、右、上、下滑动的事件。这样zepto.js官网手册中的例子就可以正常运行了。
