移动端手势事件 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(双击)等很多手势操作,提供比较完善的事件监听机制,但是 ...
随机推荐
- Fiddler2抓包
https://www.cnblogs.com/conquerorren/p/8472054.html https://www.cnblogs.com/conquerorren/p/8472218.h ...
- SQL命令行修改数据库
增加列: alter table tableName add columnName varchar(30) 修改列类型:alter table tableName alter column colum ...
- 萌新web前端从零开始(1)——计算机入门
前言:这是一个萌新从零开始的学习之路,与大家分享自己的看法与见解,还请指出错误与遗漏点方便改正. 1.认识计算机. 计算机语言常见的有C,PHP,Ruby,Java,C#,Basic,JS,C++等, ...
- 工作中的Buff加成-结构化思考力:自创独门武功 3-3-3原则
3-3-3原则 3秒钟 *思考三秒钟 沟通前根据交谈内容思考3秒钟,思考下具体需要表达什么,思考的主要点为What.Why.How. *冷静三秒钟 在沟通过程中,若遇到气氛不和谐,比如生气.愤恨等时, ...
- .net core session cookie操作
配置Session Cookie注意
- 使用纯真IP库获取用户端地理位置信息
引言 在一些电商类或者引流类的网站中经常会有获取用户地理位置信息的需求,下面我分享一个用纯真IP库获取用户地理位置信息的方案. 正文 第一步:本文的方案是基于纯真IP库的,所以首先要去下载最新的纯真I ...
- Tips on rendering interiors
http://www.evermotion.org/tutorials/show/9824/making-of-morning-breakfast-tip-of-the-week http://www ...
- Android Camera开发经验总结以及踩过的那些坑
写在开头 需求方:上传试卷的时候,用户自己拍的照片有很多问题.如:不清晰.图片歪了.错误图片等.我们要是能够对拍摄照片进行识别处理就好了,能够裁切矫正就更好了,最好可以像二维码扫描一样,直接识别处理- ...
- Linux下查看yun rpm dpkg 软件是否安装成功的方法
因为Linux安装软件的方式比较多,所以没有一个通用的办法能查到某些软件是否安装了. 总结起来就是这样几类: 一.rpm包安装的,可以用rpm -qa看到,如果要查找某软件包是否安装,用 rpm -q ...
- Orleans MultiClient 多个Silo复合客户端
目录 介绍 使用 简单例子 配置 注入到 DI 容器 添加多个 Client 全局 Orleans 服务配置 介绍 Orleans.MultiClient 是一个 Orleans 复合客户端,只需要简 ...