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标签即可。

  hammer.js

  hammer-time.js

  

hammer.js支持的手势

   hammerjs支持下面6种常规的手势,除此之外,我们还可以自定义手势。

  

  • rotate 实现旋转效果,如旋转图片
  • pinch/zoom 放大、缩小
  • press  长时间按压触发效果
  • pan 左右滑动
  • tap 点击
  • swipe 滑动

简单的例子

  使用hammerjs也是非常简单的。

  第一步: 引入hammer.js库。

   <script src="https://hammerjs.github.io/dist/hammer.js"></script>

  第二步:  创建一个用于使用手势的dom元素。

   <div id="myElement">good</div>

  第三步: 创建一个hammer实例。

    var myElement = document.getElementById('myElement');
    var mc = new Hammer(myElement);

  第四步: 添加一个事件,这样我们就可以知道该事件是否被触发了。

 mc.on("panleft panright tap press", function(ev) {
myElement.textContent = ev.type +" gesture detected.";
});

  完整的代码如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hammer</title>
<style>
#myElement {
background: silver;
height: 300px;
text-align: center;
font: 30px/300px Helvetica, Arial, sans-serif;
}
</style>
<script src="https://hammerjs.github.io/dist/hammer.js"></script>
</head>
<body>
<div id="myElement">good</div>
<script>
var myElement = document.getElementById('myElement');
var mc = new Hammer(myElement);
mc.on("panleft panright tap press", function(ev) {
myElement.textContent = ev.type +" gesture detected.";
});
</script>
</body>
</html>

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

  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 });

更多控制

  在上一个例子中,我们使用的时new Hammer创建的hammer实例,它会默认创建包含多种事件的实例(事件中不包括pinch和rotate,因为这会限制元素为块级元素)。

  这里我们将要介绍的时使用new Hammer.Manager() 创建实例,这样可以自己控制事件,如下所示:

<div id="myElement">good</div>
<script>
var myElement = document.getElementById('myElement');
var mc = new Hammer.Manager(myElement);
mc.add( new Hammer.Pan({direction: Hammer.DIRECTION_ALL, threshold: 0}) );
mc.add( new Hammer.Tap({ event: 'quadrupletap', taps: 4 }) );
mc.on("quadrupletap", function(ev) {
alert("something");
});   mc.on("pan", function(ev) {
    alert("another");
  });
</script>

即通过Hammer.Manager()创建的hammer实例默认是没有任何事件的,接着我们可以使用add来添加事件。 add之后就可以使用on来给该事件绑定函数了。值得注意的是,这里的两个事件一次只能识别一个。 

  那么如果希望可以同时识别,那么应该怎么做呢?

 

 

recognizeWith 和 requireFailure

认识hammer.js的更多相关文章

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

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

  2. Hammer.js手势库 安卓4.0.4上的问题

    Hammer.JS - v1.0.7dev - 2014-02-18 1.Hammer.JS 在安卓4.0.4 , 4.1上 touchmove事件丢失 https://code.google.com ...

  3. Hammer.js分析(四)——recognizer.js

    不同识别器会使用不同逻辑,根据从相关Input类获取到的事件对象和事件,实现自定义的触屏事件,例如tap.pinch等. 一.继承关系 Recognizer与前面的Input一样,也相当于是个抽象类. ...

  4. Hammer.js分析(三)——input.js

    input.js是所有input文件夹中类的父类,浏览器事件绑定.初始化特定的input类.各种参数计算函数. Input父类和其子类就是在做绑定事件,各种参数计算.整合.设置等返回自定义事件对象,交 ...

  5. Hammer.js分析(二)——manager.js

    “Manager”是所有识别器实例的容器,它为你设置的元素安装了交互事件监听器,并设置了触摸事件特性. manager.js中的代码会涉及到input.js和recoginzer.js中的内容,这里会 ...

  6. Hammer.js分析(一)——基础结构

    从github上面将源码下载下来,会发现有个src文件夹.当前版本是2.0.6. 总的结构如下: 一.常量 这里将常量全部列在一起是可以在对比源码的时候,更方便的查看相应内容. var VENDOR_ ...

  7. hammer用法 jquery.hammer.js

    jquery.hammer.js使用时要先引入hammer.min.js 下面代码是滑动效果:   $("#nav").hammer().bind('swiperight', fu ...

  8. hammer.js的六大事件

    1.Pan事件:在指定的dom区域内,一个手指放下并移动事件,即触屏中的拖动事件.这个事件在触屏开发中比较常用: Panstart 拖动开始 Panmove 拖动过程 Panend 拖动结束 Panc ...

  9. 利用轮播原理结合hammer.js实现简洁的滑屏功能

    最近有个任务,做一个非常小的h5的应用,只有2屏,需要做横向的全屏滑动切换和一些简单的动画效果,之前做这种东西用的是fullpage.js和jquery,性能不是很好,于是就想自己动手弄一个简单的东西 ...

  10. Hammer.js

    一.前言 移动端框架当前还处在初级阶段,但相对于移动端的应用来说已经有很长时间了.虽然暂时还没有PC端开发的需求量大,但移动端的Web必然是一种趋势,在接触移动端脚本的过程中,最开始想到的是juqer ...

随机推荐

  1. Bootstrap fileinput v2.0(ssm版)

    前言bootstrap fileinput是一个很好的文件上传插件.但是官方不出api,这就尴尬了.百度一下,每个人写法都不相同,好多代码本身都是错的.我修改后才能跑起来.综上所述:所以今天我摸索了一 ...

  2. zw版【转发·台湾nvp系列Delphi例程】HALCON TestSubsetRegio

    zw版[转发·台湾nvp系列Delphi例程]HALCON TestSubsetRegio procedure TForm1.Button1Click(Sender: TObject);var rg0 ...

  3. FastDFS+Nginx分布式文件系统部署安装

    安装: ##安装tracker.storage参考:http://www.cnblogs.com/zclzhao/p/5025229.html nginx代理设置参考:http://www.cnblo ...

  4. 论cudnn与cuda之间的关系,和实际例子测试。

    1.其中cudnn是一个常见的神经网络层加速库文件,其能够很大程度的把加载到显卡上的网络层数据进行优化计算.cuda就像一个傻大粗的加速库,其主要是依靠的是显卡 计算速度跟一些算法的优化,而且其也是进 ...

  5. 如何在官网下载JDK(版本、系统类型、字节位等)

    JDK官网地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html 步骤1: 此步注意不要下载运行时jre

  6. [问题解决]win10误删启动项(BCD)(HP电脑亲测,无需启动盘,并非重装系统)

    昨天使用easyBCD软件,开始不太懂,手残把win10的引导删除了,后来发现电脑关机总是变成重启,无奈强制关机.今天重启了一下电脑,发现电脑已经无法打开了,这才明白昨天是误删了win10的BCD. ...

  7. [参考]ASCII对照表 及 字符与二进制、十进制、16进制之间的转化(C/C++)

    第1节 ASCII码对照表 1.1 ASCII控制字符 1.2 ASCII可显示字符 第2节字符的进制转换 2.1 获取字符(8位)的上四位和下四位 2.2 获取字符(上表中的‘图形’)所对应的十六进 ...

  8. C# 后台模块 Word 模板操作

    public static string CreateWord() { //********************************************** //来自博客http://bl ...

  9. POJ 2337 Catenyms

    http://poj.org/problem?id=2337 题意: 判断给出的单词能否首尾相连,输出字典序最小的欧拉路径. 思路: 因为要按字典序大小输出路径,所以先将字符串排序,这样加边的时候就会 ...

  10. Kotlin中的object 与companion object的区别

    之前写了一篇Kotlin中常量和静态方法的文章,最近有人提出一个问题,在companion object中调用外部的成员变量会调用不到,这才意识到问题,本篇文章会带着这个疑问来解决问题. 一. obj ...