移动端手势事件 hammer.JS插件
一、引入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插件的更多相关文章
- 移动端手势库Hammer.js学习
感觉移动端原生支持的 touch.tap.swipe 几个事件好像还不够用,某些时候还会用到诸如缩放.长按等其他功能. 近日学习了一个手势库 Hammer.js,它是一个轻量级的触屏设备手势库,能识别 ...
- H5案例分享:JS手势框架 —— Hammer.js
JS手势框架 -- Hammer.js 一.hammer.js简介 hammerJS是一个开源的,轻量级的触屏设备javascript手势库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件.允许 ...
- 移动web开发,12个触摸及多点触摸事件常用Js插件
如今移动互联网已经占据了主流地位,越来越多的开发者开始从桌面转向移动平台.与桌面开发不同的是,在移动领域中,不同的操作系统.大量不同屏幕尺寸的移动设备.触摸手势操作等,这都给开发者带来了一定的难度和挑 ...
- iQuery移动端手势事件插件-jGestures
jGestures下载 jGestures事件简介 orientationchange 代表设备顺时针或者逆时针旋转.此事件可以被设备触发,可能使用的是重力传感器. pinch 缩放手势(两个手指在屏 ...
- Hammer.js 移动端手势库,多点触控插件
jquery用法: 引入3个JS:<script src="jquery.js"></script> <script src="hammer ...
- hammer.js移动端手势库
hammer.js 是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove ...
- Js 之常见手势操作插件 Hammer.js
一.下载 链接:https://pan.baidu.com/s/1UbEtSbT1xcmdzzTCaWmW1A提取码:ldqy 二.案例 三.代码 <!DOCTYPE html> < ...
- Hammer.js移动端触屏框架的使用
hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...
- hammer.js手势库使用
hammer.js是一款移动端手势库组件,支持pan(拖动).swipe(滑动).tap(轻触).press(按压,即长按).doubletap(双击)等很多手势操作,提供比较完善的事件监听机制,但是 ...
随机推荐
- VS2010下安装OpenCV2.4.3
本文记录Windows 7 X86 SP1操作系统环境下,安装与配置OpenCV2.4.3的详细步骤.前置需求:已安装有VS2010. 下载并安装OpenCV 从http://www.opencv.o ...
- error: field 'b' has imcomplete type
在下面的程序中,在编译时会遇到下面的错误: error: field 'b' has incomplete type 域b是一个不完备的类型,即class B的声明不完备 #include <i ...
- 【maven】---聚合和继承
前言 自从我知道写maven实战这本书的作者长得随心所欲后,我再拿起这本书真心的不想看前言了.下面分享一下maven中的所谓的聚合和继承. 内容 下文中的子本指的是:多个maven项目. 父本指的是: ...
- [Flex] 组件Tree系列 —— 阻止用户点击选中Tree中分支节点
mxml: <?xml version="1.0" encoding="utf-8"?> <!--功能描述:阻止用户点击选中Tree中分支节点 ...
- Angular2 内置指令 NgFor 和 NgIf 详解
http://www.jb51.net/article/89781.htm 在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令NgFor和NgIf 首先要确保你有一个 ...
- 简明依赖注入(Dependency Injection)
前言 这是因特奈特上面不知道第几万篇讲依赖注入(Dependency Injection)的文章,但是说明白的却寥寥无几,这篇文章尝试控制字数同时不做大多数. 首先,依赖注入的是一件很简单的事情. 为 ...
- 报错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 ...
- Bootrap 项目实战(微金所前端首页)第二部分(首页源码)
首页源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- MySql 的操作日志 历史记录
如何查看mysql数据库操作记录日志 1.首先确认你日志是否启用了mysql>show variables like 'log_bin'. 2.如果启用了,即ON,那日志文件就在mysql的安装 ...
- 对EM算法的理解
EM算法中要寻找的参数θ,与K-means聚类中的质心是对应的,在高斯混合模型中确定了θ,便可为样本进行类别的划分,属于哪个高斯分布的概率大就是哪一类,而这一点与K-means中的质心一样,质心确定了 ...