iShot_2024-01-27_20.08.47.png
一、什么是hammer.js
hammerJS是一个开源的，轻量级的触屏设备javascript手势库，它可以在不需要依赖其他东西的情况下识别触摸，鼠标事件。允许同时监听多个手势、自定义识别器，也可以识别滑动方向。 优点：
-
为移动端网页添加相关手势
-
去除移动端上的点击事件的300ms延迟
-
hammer.js通过压缩只有7kb，而hammer-time.js通过压缩只有1kb，因此彻底不用考虑引入他们以后的性能问题
[图片上传失败...(image-7ad5bf-1706357316462)]
二、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); })
网友评论