Hammer.js中文教程_开发语言

一、什么是hammer.js

hammerJS是一个开源的,轻量级的触屏设备javascript手势库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件。允许同时监听多个手势、自定义识别器,也可以识别滑动方向。
优点:

  • 为移动端网页添加相关手势
  • 去除移动端上的点击事件的300ms延迟
  • hammer.js通过压缩只有7kb,而hammer-time.js通过压缩只有1kb,因此彻底不用考虑引入他们以后的性能问题

Hammer.js中文教程_javascript_02

二、Rotate事件

在绑定的DOM对象中,当两根手指或更多手指呈圆形旋转时触发(就像两根手指拧螺丝一样)

  • Rotatestart:旋转开始
  • Rotatemove:旋转过程
  • Rotateend:旋转结束
  • Rotatecancel:旋转取消

三、Pinch事件

在指定的DOM对象中,两根手指(默认为两根手指,多指触控需要单独设置)或多根手指相对移动或相向移动的事件

  • Pinchstart:多点触控开始
  • Pinchmove:多点触控过程
  • Pinchend:多点触控结束
  • Pinchcancel:多点触控取消
  • Pinchn:多点触控时两手指距离越来越近
  • Pinchout:多点触控时两手指距离越来越远

四、Press事件

在指定的DOM对象中,进行初评的点击事件,相当于PC端的click事件,最小按压时间为500
ms

  • Pressup:点击事件离开时触发

五、Pan事件

在指定的DOM对象中,一个手指放下并移动事件,即触屏中的拖动事件(它会时刻执行触发事件就行mousemove事件一样)

  • Panstart:拖动开始
  • Panmove:拖动过程
  • Panend:拖动结束
  • Pancancel:拖动取消
  • Panleft:向左拖动
  • Panright:向右拖动
  • Panup:向上拖动
  • Pandown:向下拖动

六、Tap事件

在指定的DOM对象中,进行触屏的点击事件,相当于PC端的click事件,最大按压时间为250ms

七、Swipe事件

在指定的DOM对象中,一根手指快速的在触屏上滑动,即我们平时用的最多的滑动事件(和Pan事件类似,但是一次行为只会判定一次事件)

  • SwipeLeft:向左滑动
  • Swiperight:向右滑动
  • Swipetup:向上滑动
  • Swipedown:向下滑动
// 示例
// 取一个DOM对象并定义一个hammer对象
var hammertime = new Hammer(document.getElementById("test")); 
// 为这个DOM事件绑定Swipe事件,并且e为事件对象
hammertime.on("swipe",function(e){
	document.getElementById("a").innerHtml += "swipe偏移量:x-" + e.deltaX + ",y-" + e.deltaY;
	console.log(e);
})

官网下载: https://hammerjs.github.io/