touch.js 移动端的手势识别

手机端不同于PC端，只有一个鼠标指针，在手机端上，可以实现多种手势 *** 作，像左滑、右滑、双击、缩小、放大、拖拽等等。

在事件中 提供了关于手势事件的事件类型，但是原生的JS实现过于复杂，touch.js是一个移动设备上的手势识别与事件库，利用这个库可以方便很多 *** 作。

---

原生JS事件类型

gesturestart：当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发
gesturechange：当触摸屏幕的任何一个手指的位置发生变化时触发
gestureend：当任何一个手指从屏幕上面移开时触发

只有两个手指都触摸到事件接受容器时才会触发这些事件,每个触摸事件的event对象都提供了在鼠标事件中常见的属性bubbles cancelable view clientX clientY screenx screenY等

手势事件event对象包含的特殊属性：

rotation表示旋转的角度,从o开始,负值表示逆时针旋转,正值表示顺时针旋转
scale表示两个手指间距离的变化情况,数值从1开始，随着距离拉大而增加,距离缩小而减小
 

touch.js CDN

touch.on

语法：touch.on(element, types, callback)
绑定指定元素的事件。

element: 元素对象或选择器。

types: 事件的类型, 可接受多个事件以空格分开，支持原生事件的透传,

types支持的一些事件类型有:

 

callback: 类型function， 事件处理函数, 移除函数与绑定函数必须为同一引用

example

//swipe example 
touch.on('.target', 'swipeleft swiperight', function(ev){
    console.log("you have done", ev.type);
});