移动端手势事件 hammer.JS插件
今天我总结一下我以前用的一个移动端手势的插件 HAMMER.JS插件,很好用,而且提供的手势也很多。它没有任何依赖性,它很小,只有7.34 kB最小化+ gzip压缩!我只是简单的总结了一下他的用法,详细使用请访问官网
一、引入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,它是一个轻量级的触屏设备手势库,能识别 ...
- vue 多点触控手势_移动端手势事件(多指操作)
在移动端开发中,现有的手势事件只有IOS上的浏览器支持,因此对其他设备上的浏览器手势事件我们必须在移动端的touchstart.toucmove.touchend事件上进行改造升级,下面就介绍下升级改 ...
- js常用插件(二)之移动端手势利器hammer单双指操作
js常用插件之hammer单双指操作 欢迎点击: 个人官网博客 移动端手势利器: 先引用cdn或自己下载下来 <script src="https://cdn.bootcdn.net/ ...
- h5移动端vue手势插件,元素图片缩放、旋转拖拉拖拽手势事件
h5手势拖拽,缩放等功能插件vue-hand-mobile的使用 (1)插件介绍 (1-1)使用建议 (2)安装 (3)引入 (4)使用 (5)手势事件 轻拍 长按 拖动 快滑 两指缩放 两指旋转 ( ...
- Hammer.js - 旋转 拖拽 移动 缩放
感觉移动端原生支持的 touch.tap.swipe 几个事件好像还不够用,某些时候还会用到诸如缩放.长按等其他功能. 学习了一个手势库 Hammer.js,它是一个轻量级的触屏设备手势库,能识别出常 ...
- hammer.js移动端开发手势库
原文转载自https://www.cnblogs.com/vajoy/p/4011723.html hammerJS是一个优秀的.轻量级的触屏设备手势库,现在已经更新到2.04版本,跟1.0版本有点天 ...
- Hammer.js 手势事件
欢迎加入qq群(IT-程序猿-技术交流群):757345416 一.前言 移动端框架当前还处在初级阶段,但相对于移动端的应用来说已经有很长时间了.虽然暂时还没有PC端开发的需求量大,但移动端的Web必 ...
- Hammer.js移动端触屏框架的使用
hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...
- 移动端手势的七个事件库
1:GMU:http://cloudajs.org/ui/brand/gmu GMU是基于zepto的mobile UI组件库,提供webapp.pad端简单易用的UI组件! http://gmu.b ...
最新文章
- hadoop之 参数调优
- 不小心删表删库了,还能救
- 工程制图 (组合体的视图与尺寸注法)
- 如何阅读AI顶会论文,搭建深度学习知识体系框架?
- 有关于idea快捷键冲突的问题
- 7款免费原型设计工具
- Bokeh——交互式可视化库
- Spark RDD算子介绍
- spring mysql 连接池配置_SpringBoot数据库连接池常用配置
- 52 FI配置-财务会计-固定资产-折旧-定义终止值代码
- IOT设备的7大安全问题
- python测试面试题-python接口自动化+测试开发面试题
- 一文解析圆柱锂电外观缺陷检测问题
- IDM下载器Windows系统是最快的下载工具
- 李泉老师《卓越商务礼仪与高情商沟通》
- matlab hold all,Matlab中的命令hold on hold off | 学步园
- 爬虫入门(1)——requests(1)
- ORACLE US7ASCII编码 读取时乱码问题
- 【搞笑】新闻联播熏陶下的小学生作文
- 批量安装Windows系统
热门文章
- TP开发优秀开源的付费内容视频课程教学管理系统源码
- item()和items()的用法详解与区别
- dtm文件生成等高线 lisp_采用人机对话方式从地形图上获取DTM数据的等高线—横断面法...
- 打造F11一键恢复系统
- SD卡与MMC卡的区别
- Python爬虫之煎蛋网图片下载
- PV、EV、AC、BAC、EAC、ETC等计算公式含义
- hp台式计算机u盘启动设置,如何在HP计算机上设置USB引导? HP电脑BIOS设置程序U盘启动教程...
- python requests cookie保存_Python爬虫教程:爬取知乎网
- 基于matlab的雷达,基于Matlab的雷达系统仿真