hammer.js的六大事件

1、Pan事件:在指定的dom区域内,一个手指放下并移动事件,即触屏中的拖动事件。这个事件在触屏开发中比较常用:

Panstart 拖动开始

Panmove 拖动过程

Panend 拖动结束

Pancancel 拖动取消

Panleft 向左拖动

Panright 向右拖动

Panup 向上拖动

Pandown 向下拖动

2、Pinch事件: 在指定的dom区域内,两个手指(默认为两个手指,多指触控需要单独设置)或多个手指相对(越来越近)移动或相向(越来越远)移动时的事件:

Pinstart 多点触控开始

Pinchmove 多点触控过程

Pinchend 多点触控结束

Pinchcancel 多点触控取消

Pinchin 多点触控时两手指距离越来越近

Pinchout 多点触控时两手指距离越来越远

3、Press事件:在指定的dom区域内触屏版本的点击事件,这个事件相当于PC端的click事件,该事件不能包含任何的移动,最小按压时间为500毫秒,常用于手机上的复制、粘贴等功能:

Pressup 点击事件离开时触发

4、Rotate事件:在指定的DOM区域内,当两个手指或更多手指成原型旋转时触发(就像两个手指拧螺丝):

Rotatestart 旋转开始

Rotatemove 旋转过程

Rotateend 旋转结束

Rotatecancel 旋转取消

5、Swipe事件:在指定的dom区域内,一个手指快速的在触屏上滑动。即我们平时用到最多的滑动事件:

Swipeleft 向左滑动

Swiperight 向右滑动

Swipeup 向上滑动

Swipedown 向下滑动

6、Tap事件:在指定的dom区域内,一个手指轻拍或点击时触发该事件,该事件最大点击时间为250毫秒,超过这个时间按Press事件进行处理。

关于Tap与Click

在安卓触屏上,Tap事件和Click事件可以同时触发,但click事件会有几百毫秒的延迟,即先触发Tap事件,过一段时间再触发click事件。

关于某些事件监听不能触发的问题(比如swipeup)

var hammertime = new Hammer(document.getElementById(“test”));

hammertime.add(new Hammer.Swipe());

hammertime.on(“swipeup”,function() {…})

Hammer.JS在创建一个新对象时默认会添加些常用事件,但不是全部事件,有些没有默认添加的事件需要单独做监听,就像上面的代码中展示的一样。

当一个对象需要多个事件时,经官方api和测试结果,需要对一个事件添加多个监听:

var hammertime = new Hammer(document.getElementById(“test”));

hammertime.add(new Hammer.Swipe());

hammertime.on(“swipeup”, function(){…});

var hammertime1 = new Hammer(document.getElementById(“test”));

hammertime.on(“swipeleft”,function(){…});

最后一段存疑,经过我的测试,在一个hammertime上可以监听多个事件,效果与上面代码一样。

一段合适的示例代码:

<style>
#myElement {
  background: silver;
  height: 300px;
  text-align: center;
  font: 30px/300px Helvetica, Arial, sans-serif;
}
</style>
<div id="myElement"></div>
<script>
var myElement = document.getElementById(‘myElement‘);
// create a simple instance
// by default, it only adds horizontal recognizers
var mc = new Hammer(myElement);
// listen to events...
mc.on("panleft panright tap press", function(ev) {
    myElement.textContent = ev.type +" gesture detected.";
});
</script>
时间: 2024-08-30 10:58:08

hammer.js的六大事件的相关文章

Hammer.js

一.前言 移动端框架当前还处在初级阶段,但相对于移动端的应用来说已经有很长时间了.虽然暂时还没有PC端开发的需求量大,但移动端的Web必然是一种趋势,在接触移动端脚本的过程中,最开始想到的是juqery.Jquery2.0版本及以上已经开始偏向移动端,如对h5的支持,但支持还是不够完善,希望jq在后面的版本能够逐渐支持起来. 最初在开发移动端Web的时候使用w3c标准的语法结构和原生的js开发,但相对来说开发量比较大,而且每一步都要考虑各移动端浏览器的兼容,像比较让程序员头痛的大wp手机,很多事

移动端手势事件 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 { wid

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

“Manager”是所有识别器实例的容器,它为你设置的元素安装了交互事件监听器,并设置了触摸事件特性. manager.js中的代码会涉及到input.js和recoginzer.js中的内容,这里会先做大致的流程分析,具体分析会在接下来的文章中详谈. 一.Manager构造函数 初始化流程如下所示: 对应的函数代码如下所示: function Manager(element, options) { this.options = assign({}, Hammer.defaults, optio

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

从github上面将源码下载下来,会发现有个src文件夹.当前版本是2.0.6. 总的结构如下: 一.常量 这里将常量全部列在一起是可以在对比源码的时候,更方便的查看相应内容. var VENDOR_PREFIXES = ['', 'webkit', 'Moz', 'MS', 'ms', 'o'];//前缀 var TEST_ELEMENT = document.createElement('div');//测试元素 var TYPE_FUNCTION = 'function';//函数 //-

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

最近有个任务,做一个非常小的h5的应用,只有2屏,需要做横向的全屏滑动切换和一些简单的动画效果,之前做这种东西用的是fullpage.js和jquery,性能不是很好,于是就想自己动手弄一个简单的东西来实现.最后我用zepto + hammer.js 和轮播的方式解决了这个问题,效果还不错,整个页面不开启Gzip时所有资源请求的数据大小为200KB左右.这篇文章总结下这个方法的实现思路. 效果演示(代码下载): 1. 实现要点 1)滑屏借鉴bootstrap的carousel插件,不过完全没有它

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

input.js是所有input文件夹中类的父类,浏览器事件绑定.初始化特定的input类.各种参数计算函数. Input父类和其子类就是在做绑定事件,各种参数计算.整合.设置等返回自定义事件对象,交给识别器的相关对象使用. 一.Input父类 Input相当于一个抽象类,对象中总共有3个方法 1)handler(ev) 这相当于一个抽象方法,在上图中的6个子对象里,都会实现这个方法. ev是事件对象(不是自定义的那个),例如触屏事件中就是 TouchEvent. 2)init()与destro

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

不同识别器会使用不同逻辑,根据从相关Input类获取到的事件对象和事件,实现自定义的触屏事件,例如tap.pinch等. 一.继承关系 Recognizer与前面的Input一样,也相当于是个抽象类. 从上图中可以看到,6个子类都会先继承AttrRecognizer类,因为AttrRecognizer类中的2个方法可以共用,attrTest与process,如果自己不实现,就可以直接调用. 二.识别器状态 每个识别器的初始状态是 “POSSIBLE”,每个识别器都会有一个状态周期. 例如做一次

hammer.js初探

最近觉得自己的进步比较慢了,很有可能是因为中文区的学习和百度的使用极大的限制了自己的视野,所以,以后无论是新技术的学习,还是问题的解决,做到以下几点: 新技术的学习必须通过英文文档,而不是翻译过来的蹩脚的中文文档. 问题的搜寻通过google.通过stackoverflow,如果在知道其局限性的情况下再去百度或者其他方法. 遇到有问题的词汇就通过Google翻译搜寻,但实际上这时候通过百度也是可以的,因为百度知道的存在也是有用的. 嗯,第一个完整的英文文档就从hammer.js开始吧! 加油.

使用Hammer.js的H5页面开发DOM的一些小说法

前几天,一个小伙伴说叫我帮他写一个移动端上的一个轮播图,个人一般是不接私活的,毕竟平时工作也是单双休,时间也不很多. 可能大部分程序员,多余的时间都是看看新闻,打游戏,或者学习新的知识,缺少运动吧. 所以,个人感觉接私活那点时间,你可以去锻炼身体,或者学习新的知识,当然这些都是看法,完全不代表你跟我有一样的看法,好吧,不过既然是朋友,以前也是同学,而且不就是一个轮播图吗,自己也写过一些移动端里,轮播图是移动端上最常见的一个广告展示功能. 但是,当小伙伴把大致的需求高速了我以后,完全跟轮播图没有,