博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
hammer.js
阅读量:5260 次
发布时间:2019-06-14

本文共 1114 字,大约阅读时间需要 3 分钟。

hammerjs是什么?

hammerjs是一个短小精悍的库,他可以让我们轻松的实现移动端上的手势。 

  hammerjs的两大优势如下:

  1. 为移动端网页添加相关手势。
  2. 去除移动端上的点击事件的300ms延迟.

为什么使用hammerjs

  诚然,我们可以通过touch的四个事件等来完成相同的功能,但是不可避免的会比较麻烦,所以既然前人已经造了这个好轮子,为什么不去使用呢? 另外,300ms的延迟有时是我们不需要的,比如,我们在做webapp时,不需要页面的缩放,而300ms的延迟就是为了webapp的缩放而规定的, 因此做webapp时我们就可以使用hammer-time.js来移除300ms的点击延迟。

  另外,hammer.js经过压缩只有7kb,而hammer-time.js经过压缩只有1kb,所以完全不用考虑引入他们之后的性能问题,这简直太棒了!

安装

  我们可以直接将hammer.js和hammer-time.js下载下来,然后引入script标签即可。 

  

  

例子

 

good
var myElement = document.getElementById('myElement');   var mc = new Hammer(myElement); mc.on("panleft panright tap press", function(ev) { myElement.textContent = ev.type +" gesture detected."; });

 

 这样,当我们使用这些事件时就会触发相应的函数了。 这里有几点需要注意:

  1.  hammer.js依赖于一个dom元素,并需要创建他的实例。
  2.  这里我们直接使用new Hammer()来创建了一个实例,这个实例中就自动帮我们创建了tap、doubletap、pan、swap、press事件,所以我们可以直接通过on来监听这些事件,但是他并没有创建 pinch 事件和 rotate 事件,因为创建这两个事件会将该元素修改为块级元素,当然,我们可以通过设置还使得其支持pinch和rotate事件。如下所示:
mh.get('pinch').set({ enable: true });mh.get('rotate').set({ enable: true });

 

 

参考文献:https://www.cnblogs.com/zhuzhenwei918/p/6853258.html

 

转载于:https://www.cnblogs.com/sun-web/p/10695709.html

你可能感兴趣的文章
Objective-C sortUsingSelector方法
查看>>
161017、SQL必备知识点
查看>>
hdu 1541Stars
查看>>
王小花爱学习
查看>>
HTML DIV+CSS
查看>>
TFS增加dataserver
查看>>
kill新号专题
查看>>
网络操作系统第三章习题
查看>>
jquery datepicker 只显示年月
查看>>
MVC学习系列——Model验证扩展
查看>>
C# GC 垃圾回收机制
查看>>
Displaying SharePoint Lists or Libraries in other sites 显示其他站点的List
查看>>
iOS9新特性之泛型
查看>>
图片处理的一些函数
查看>>
第十七章 Django框架——缓存机制
查看>>
JSON.stringify
查看>>
fineReport 下拉联动 js
查看>>
Labview【顺序结构】
查看>>
mysqladmin 修改和 初始化密码
查看>>
Docker Secrets
查看>>