一、引入hammer.JS

1.下载地址:http://download.csdn.net/detail/webxiaoma/9872249 
2.官网地址:http://hammerjs.github.io/examples/ 
3.CDN链接:http://hammerjs.github.io/dist/hammer.min.js

二、用法

1.首先我们先写一个出发事件的DOM元素

HTML:

   <style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
} .test {
width: 100%;
height: 100%;
background: red;
text-align: left;
color:white;
} </style>
<div id="test" class="test"></div>

2.我们创建一个新的hammer对象并且在初始化时指定要处理的dom元素

var hammertime = new Hammer(document.getElementById("test"));

3.为该dom元素指定触屏移动事件

hammertime.on("press", function (e) {                    document.getElementById("result").innerHTML += "按压超过500ms了";

});

三、注意点 重点内容

1.推荐使用视口元标记,通过禁用双引号/缩小缩放功能,可以更好地控制网页。

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

2.水平 pan和swipe和多点触控pinch和rotate识别。默认情况下,压缩和旋转识别器将被禁用,因为它们会使元素阻塞,但您可以通过调用以下方式启用它们: 
①方法一:

 hammertime.add(new Hammer.Pinch());
hammertime.add(new Hammer.Rotate());

②方法二:

hammertime.get('pinch').set({ enable: true });
hammertime.get('rotate').set({ enable: true }); //启用pan和swipe识别器的垂直方向或全方向:
hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });

启用成功后在去调用该事件,否则该事件可能不会触发。 
另外我们也可以使用 remove(事件) 移除某个事件

hammertime.remove('rotate'); // 移除旋转手势事件

四、提供的事件

1、点击事件(也就是常说的tocuh事件)

选项 默认 描述
event pan 事件名称
pointers 1 必需指针。0为所有指针。
threshold 10 识别前需要的最小平移距离
direction DIRECTION_ALL 平移方向。

panstart 单手指按下时事件 
panmove 单手指移动时事件 
panend 单手指离开时事件 
pancancel 手势事件被移除是触发 
panleft 单手指向下左滑动时触发 
panright 单手指向右滑动时触发 
panup 单手指向上滑动时触发 
pandown 单手指向下滑动时触发

2.缩放事件 (需要手动开启 ammertime.get('pinch').set({ enable: true });

选项 默认 描述
event pinch 事件名称
pointers 2 必需的指针,最小为2。
threshold 0 识别前的最小比例

pinch 手指缩放触发 
pinchstart 手指缩放开始时触发 
pinchmove 手指缩放时触发 
pinchend 手指缩放结束后触发 
pinchcancel 手指缩放事件被清除时触发 
pinchin 手指向内缩放时触发 
pinchout 手指向外缩放时触发

3.按压(长按)事件

选项 默认 描述
event press 事件名称
pointers 1 必需指针。0为所有指针。
threshold 9 按压时允许的最小移动。
time 251 压缩时间以毫秒为单位

press 手指按压时触发(默认按压251毫秒) 
pressup 手指按压结束时触发

4.旋转事件 (两个手指)

选项 默认 描述
event rotate 事件名称
pointers 2 必需的指针,最小为2。
threshold 0 识别前的最小比例

rotate 旋转触发 
rotatestart 旋转开始时触发 
rotatemove 旋转时触发 
rotateend 旋转结束时触发 
rotatecancel 旋转被移除时触发

5.滑屏事件

选项 默认 描述
event rotate 事件名称
pointers 1 必需的指针,最小为2。
threshold 10 识别前需要的最小距离。
direction DIRECTION_ALL 平移方向。
velocity 0.3 识别之前所需的最小速度,单位为px / ms。

swipe 滑屏触发 
swipeleft 左滑屏时触发 
swiperight 右滑屏时触发 
swipeup 上滑屏时触发 
swipedown 下滑屏时触发

小提示:当调用Hammer()创建一个简单的实例时,平移和滑动识别器被配置为仅检测水平手势。你需要这样去在垂直方向去配置:

hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });

6.tap点击事件

选项 默认 描述
event tap 事件名称
pointers 1 必需的指针
taps 1 所需的水龙头数量。
interval 300 多个水龙头之间的最大时间(以ms为单位)
time 250 最大按压时间(ms)。
threshold 2 在做点击时,允许一些小动作。
posThreshold 10 多个抽头之间的最大位置差异。

tap 点击事件 
doubletap 双击触发

重点内容 
以上事件中我们可以改变事件的默认状态,比如按压事件默认是251毫秒触发,我们可以改为1s后触发。

hammertime.get('press').set({ time:1000 });

五、事件对象

每个事件都存在事件对象:

hammertime.on("doubletap", function (e) {

   document.getElementById("result").innerHTML += e;
var a = console.log(e); });

事件对象中包含以下信息: 
Hammer触发的所有事件都会接收到包含以下属性的事件对象。

名称
type 事件名称 像panstart。
deltaX X轴的移动。
deltaY Y轴运动。
deltaTime 自第一次输入以来的总时间(毫秒)。
distance 距离移动
angle 角度移动。
velocityX 速度在X轴上,以px / ms为单位。
velocityY Y轴上的速度,以px / ms为单位
velocity Y轴上的速度,以px / ms为单位
direction 方向移动。匹配DIRECTION常数。
offsetDirection 方向从起点移开。匹配DIRECTION常数。
scale 多点触控时缩放。1单触。
rotation 多点触摸时已经完成的旋转(deg)。0单击。
center 多点触摸的中心位置,或只是单指针。
srcEvent 源事件对象,类型TouchEvent,MouseEvent或PointerEvent。
target 接收到事件的目标。
pointerType 主指针类型,可以是touch,mouse,pen或kinect。
eventType 事件类型,匹配INPUT常量。
isFirst true 当第一个输入。
isFinal true 当最后(最后)输入。
pointers 具有所有指针的数组,包括结束指针(touchend,mouseup)。
changedPointers 具有所有新/移动/丢失指针的数组。
preventDefault 参考srcEvent.preventDefault()方法。只有专家!
 
 
 
 
 
 

移动端手势事件 hammer.JS插件的更多相关文章

  1. 移动端手势库Hammer.js学习

    感觉移动端原生支持的 touch.tap.swipe 几个事件好像还不够用,某些时候还会用到诸如缩放.长按等其他功能. 近日学习了一个手势库 Hammer.js,它是一个轻量级的触屏设备手势库,能识别 ...

  2. H5案例分享:JS手势框架 —— Hammer.js

    JS手势框架 -- Hammer.js 一.hammer.js简介 hammerJS是一个开源的,轻量级的触屏设备javascript手势库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件.允许 ...

  3. 移动web开发,12个触摸及多点触摸事件常用Js插件

    如今移动互联网已经占据了主流地位,越来越多的开发者开始从桌面转向移动平台.与桌面开发不同的是,在移动领域中,不同的操作系统.大量不同屏幕尺寸的移动设备.触摸手势操作等,这都给开发者带来了一定的难度和挑 ...

  4. iQuery移动端手势事件插件-jGestures

    jGestures下载 jGestures事件简介 orientationchange 代表设备顺时针或者逆时针旋转.此事件可以被设备触发,可能使用的是重力传感器. pinch 缩放手势(两个手指在屏 ...

  5. Hammer.js 移动端手势库,多点触控插件

    jquery用法: 引入3个JS:<script src="jquery.js"></script> <script src="hammer ...

  6. hammer.js移动端手势库

    hammer.js 是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove ...

  7. Js 之常见手势操作插件 Hammer.js

    一.下载 链接:https://pan.baidu.com/s/1UbEtSbT1xcmdzzTCaWmW1A提取码:ldqy 二.案例 三.代码 <!DOCTYPE html> < ...

  8. Hammer.js移动端触屏框架的使用

    hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...

  9. hammer.js手势库使用

    hammer.js是一款移动端手势库组件,支持pan(拖动).swipe(滑动).tap(轻触).press(按压,即长按).doubletap(双击)等很多手势操作,提供比较完善的事件监听机制,但是 ...

随机推荐

  1. VS2010下安装OpenCV2.4.3

    本文记录Windows 7 X86 SP1操作系统环境下,安装与配置OpenCV2.4.3的详细步骤.前置需求:已安装有VS2010. 下载并安装OpenCV 从http://www.opencv.o ...

  2. error: field 'b' has imcomplete type

    在下面的程序中,在编译时会遇到下面的错误: error: field 'b' has incomplete type 域b是一个不完备的类型,即class B的声明不完备 #include <i ...

  3. 【maven】---聚合和继承

    前言 自从我知道写maven实战这本书的作者长得随心所欲后,我再拿起这本书真心的不想看前言了.下面分享一下maven中的所谓的聚合和继承. 内容 下文中的子本指的是:多个maven项目. 父本指的是: ...

  4. [Flex] 组件Tree系列 —— 阻止用户点击选中Tree中分支节点

    mxml: <?xml version="1.0" encoding="utf-8"?> <!--功能描述:阻止用户点击选中Tree中分支节点 ...

  5. Angular2 内置指令 NgFor 和 NgIf 详解

    http://www.jb51.net/article/89781.htm 在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令NgFor和NgIf 首先要确保你有一个 ...

  6. 简明依赖注入(Dependency Injection)

    前言 这是因特奈特上面不知道第几万篇讲依赖注入(Dependency Injection)的文章,但是说明白的却寥寥无几,这篇文章尝试控制字数同时不做大多数. 首先,依赖注入的是一件很简单的事情. 为 ...

  7. 报错The sandbox is not in sync with the Podfile.lock

    clone下来的项目,运行的时候报错 diff: /../Podfile.lock: No such file or directory diff: Manifest.lock: No such fi ...

  8. Bootrap 项目实战(微金所前端首页)第二部分(首页源码)

    首页源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  9. MySql 的操作日志 历史记录

    如何查看mysql数据库操作记录日志 1.首先确认你日志是否启用了mysql>show variables like 'log_bin'. 2.如果启用了,即ON,那日志文件就在mysql的安装 ...

  10. 对EM算法的理解

    EM算法中要寻找的参数θ,与K-means聚类中的质心是对应的,在高斯混合模型中确定了θ,便可为样本进行类别的划分,属于哪个高斯分布的概率大就是哪一类,而这一点与K-means中的质心一样,质心确定了 ...