移动端手势库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方向上移动的速度

 

 

 

  

 

 

posted @ 2016-10-26 16:50  zhaoo  阅读(2918)  评论(3编辑  收藏  举报