一, 引用
http://hammerjs.github.io/dist/hammer.min.js
二, 功能
hammer提供了一组模拟多点触摸手势,增强滑动手势的体验度,而且不依赖其它任何库,用法和jQuery类似:
var el = document.getElementById("el"); //绑定左滑事件 Hammer(el).on("swipeleft",function(e){ alert("左滑成功"); })
三, API
一些选项可以通过第二个参数传入:
var hammertime = Hammer(element,{ drag : false, //不允许拖曳行为 transform : false //transform规定 transform_always_block : true, transform_min_scale : 0.5 //最小到原图的0.5 drag_block_horizontal : true, drag_block_vertical : true, drag_min_distance : 0 })
hammer触摸事件对象的属性(e.gesture):
angle | 手指初始点和当前点构成的直线角度 |
center | 包括pageX, pageY,表示坐标 |
deltaTime | 手指处于屏幕的时间 |
deltaX/deltaY |
手指在X和Y方向移动的距离 |
direction |
与angle相关联,left,right,up,down |
distance | 手指移动的距离 |
eventType | |
pointerType | 指针类型,touch或mouse |
rotation | 双指触摸时的旋转,transform触发时使用 |
scale | 双指触摸时的缩放,transform触发时使用 |
srcEvent | |
startEvent | |
target | 事件目标 |
timeStamp | 事件发生时的时间戳 |
touches | 原始事件的touches对象 |
velocityX/velocityY | 手指在X和Y方向上移动的速度 |