移动端手势库Hammer.js—增强touch事件或手势
一, 引用
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方向上移动的速度 |

浙公网安备 33010602011771号