手势包括点击（tap），长按（press），滑动（swipe），方向（pan）

使用实例：

<!DOCTYPE html>

<html>

    <head>

           <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

        <meta charset="UTF-8">

        <link rel="stylesheet" href="reset.min.css" />

        <title></title>

        <style>

            #myElement {

              background: silver;

              height: 300px;

              text-align: center;

              font: 30px/300px Helvetica, Arial, sans-serif;

            }

        </style>

    </head>

    <body class="flex-column center-center">

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

        <script type="text/javascript" src="hammer.js"></script>

        <script>

            var myElement = document.getElementById('myElement');

　　              var hammer = new Hammer(myElement);

            hammer.on("swipeleft", function (ev) {

                 console.log(ev.type);

            });

            hammer.on("swiperight", function (ev) {

                 console.log(ev.type);

            });

            hammer.on("panleft panright panup pandown tap press", function (ev) {

                 console.log(ev.type);

            });

        </script>

    </body>

</html>

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. for循环和字典预习

    print("*" *8)for a in range(1,9): print(a,end="")#1-9的奇数print()for a in range(1, ...

  2. 专访阿里云MVP黄胜蓝：90 后 CTO花了6年，改变了你日常生活里的这件事

    [黄胜蓝:现任武汉极意网络科技有限公司CTO.高中时期NOIP一等奖保送至武汉大学,大学期间曾指导团队获得世界数学建模大赛金奖,同时负责武汉大学学生校园门户网站的运维工作.于2013年加入武汉极意网络 ...

  3. python和go对比字符串的链式处理

    一.什么是链式处理 对数据的操作进行多步骤的处理称为链式处理,链式处理器是一种常见的编程设计,链式处理的开发思想将数据和操作拆分,解耦,让开发者可以根据自己的技术优势和需求,进行系统开发,同时将自己的 ...

  4. Ubuntu下搭建Pixhawk开发环境

    安装提示 需要网络环境,不然下载会很慢. 工具安装 1. 权限设置 sudo usermod -a -G dialout $USER 代码输入可以拷贝,但是不可以用快捷键. 需要输入密码,输入密码无显 ...

  5. Java 12 正式发布，8大新特性！

    自 2 月 7 日开始,Java/JDK 12 就进入了 RC 阶段.按照发布周期,美国当地时间 3 月 19 日,也就是北京时间 20 号 Java 12 正式发布了! △ JDK 12 GA 发布 ...

  6. [SNOI2017]遗失的答案

    题目 首先\(G,L\)肯定会满足\(G|L\),否则直接全部输出\(0\) 之后我们考虑一下能用到的质因数最多只有\(8\)个 同时我们能选择的数\(x\)肯定是\(L\)的约数,还得是\(G\)的 ...

  7. 锐速与BBR的原理简单解析

    锐速与BBR的原理简单解析  4 前言 昨天,有一位朋友在我的文章下留言说,锐速和BBR不都是一样,是拥塞算法嘛.因为这方面需要讲的东西比较多,所以我还是专门水一篇文章吧. 锐速 参考资料: http ...

  8. Android 开发 Camera1_如何使用对焦功能

    前言 Camera1的自动对焦还是有一些坑值得开一个篇幅来讲解,一般对焦Mode有以下几种: Camera.Parameters.FOCUS_MODE_CONTINUOUS_VIDEO 连续自动对焦视 ...

  9. loj6094 归乡迷途

    题意:有一张n个点的无向图,点有标号.求满足下列性质的图有多少个. 1.任意节点到1的最短路唯一.2.i的最短路长度<=i+1的最短路长度.3.所有点的度数给定,为2或3. n<=400. ...

  10. eval()方法与str()方法

    eval()方法与str()方法 #_author:Administrator#date:2019/10/31 a={ 'q':{'xxx':3456}}#将一个字典转换成一个字符串a=str(a)p ...