Zepto

Zepto 是一个轻量级的现代浏览器的 JS 库,用法与 jQuery 一样

这里主要介绍它对移动端 touch 事件的处理


默认的 zepto.js 包没有 touch 事件模块, 我们需要自定义 Div Zepto 或则 Download Zetop.js

Touch

zepto 可以使用 of 或则 off 处理 touch 事件,与 click 等事件一样的
//监听 touchstart 事件
$("#dom").on('touchstart',function(){
	
});
//监听 touchmove 事件的
$("#dom").on('touchmove',function(){
	
});
//监听 touchend 事件的
$("#dom").on('touchend',function(){
	
});
上面是对原生的 touch 事件,相对的 zepto 封装了自己的 api

tap 模拟 click

tap 事件用作移动端点击事件的穿透处理

tap 封装了touchstart、touchmove、touchend 三个事件的处理(start之后如果有产生 move 事件发生则取消此次 tap 事件的触发)
click 则只是单纯的绑定了浏览器的 click 事件, 素以 tap 与 click 是有区别的
//监听 tap 事件
$("#dom").on('tap',function(){
	// 测试与 click 会发先与 click 效果类似
});

singleTap / doubleTap 单击/双击

如果不需要判断是否是 单击或则双击 可以使用 tap 事件替代
//监听 singleTap 事件
$("#dom").on('singleTap',function(){
	
});


//监听 doubleTap 事件
$("#dom").on('doubleTap',function(){
	
});

longTap 长按

长按 750ms 触发
//监听 longTap 事件
$("#dom").on('longTap',function(){
	
});

滑动事件

swipe 滑动

在屏幕上滑动一定距离触发,不限定方向
//监听 swipe 事件
$("#dom").on('swipe',function(){
	
});

swipeLeft 从右向左滑动

在屏幕上滑动一定距离触发, 限定方向,x 轴上滑动一定距离触发
//监听 swipeLeft 事件
$("#dom").on('swipeLeft',function(){
	
});

swipeRight 从左向右滑动

在屏幕上滑动一定距离触发, 限定方向,x 轴上滑动一定距离触发
//监听 swipeRight 事件
$("#dom").on('swipeRight',function(){
	
});

swipeUp 从下向上滑动

在屏幕上滑动一定距离触发, 限定方向,y 轴上滑动一定距离触发
//监听 swipeUp 事件
$("#dom").on('swipeUp',function(){
	
});

swipeDown 从上向下滑动

在屏幕上滑动一定距离触发, 限定方向,y 轴上滑动一定距离触发
//监听 swipeDown 事件
$("#dom").on('swipeDown',function(){
	
});