方法/步骤
-
你可以绑定以下四种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官网手册中的例子就可以正常运行了。
-