zoukankan      html  css  js  c++  java
  • 移动端手势库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方向上移动的速度

      

     

     

  • 相关阅读:
    缓存问题
    基情探测器心得
    新手最常见的误解和错误
    C语言书籍推荐
    初学者编程实战指南 (4) 由一个简单的例子学习抽象
    数据结构的动画演示
    利用IDE使你的代码风格好看一些
    初学者编程实战指南 (2) 避免逻辑的重复
    入门编程语言的选择问题
    关于ACM集训队
  • 原文地址:https://www.cnblogs.com/zhaoliner/p/5993823.html
Copyright © 2011-2022 走看看