saber酱的抱枕

Fly me to the moon

02/17
08:00
学习

移动设备触摸手势库——Hammer.JS

一直以来,JavaScript对于鼠标事件和触摸事件提供的支持都比较初级,此问题在pc端不是很明显,但是移动端的触摸手势就比较多样化了,为此我们有必要使用js库来帮助我们处理触摸事件。

Hammer.JS是一款轻量级的移动设备触摸手势库,不依赖其他js库,兼容性好(支持WP),支持常见的点击、拖动、缩放、旋转等触摸事件,也可支持多点触控。

Hammer.JS支持的六大事件:

移动设备触摸手势库——hammer.js

Hammer.JS支持在pc端浏览器上用鼠标模拟触摸事件,这样我们开发时可以在pc上进行测试,极大提高了开发效率(看它官网的描述,似乎是可以在pc上模拟出全部的6种动作。不过缩放和旋转我试不出来,按下shift模拟双指操作也没反应①)。

下面是一个左右滑动的示例:

var myElement =document.querySelector("#a");
var mc = new Hammer(myElement);
mc.on("swipeleft swiperight", function(ev) {
	if (ev.deltaTime>100) {	// 判断一下延迟时间,小于100ms的不处理
		if (ev.deltaX>0) {	//向右滑动,展示左侧内容
			// code
		}else if (ev.deltaX<0) {	//向左滑动,展示右侧内容
			// code
		}
	}
    console.log(ev);
});

hammer.js用起来还真是费了不少劲。

首先是它有好几个可以下载的地方,但不同的地方不但有的版本号不同,有些甚至完全不生效。我现在用的是https://hammerjs.github.io/dist/hammer.min.js。也可能是其他版本改了api?

第二是注意禁用浏览器自己的选择事件和拖动事件。

举个例子,网页中的图片是可以被拖动的。当你按下鼠标并移动来模拟滑动事件时,会发现图片变成了拖拽状态,这时候就触发不了hammer.js上绑定的事件了,所以要用css禁止拖动该元素。

拖动文字可能导致文字被选中,所以也要禁止选中该元素。

一开始我没发现这个事情,当我把可以正常使用的demo的代码移植到我的项目里之后,发现不生效,这让我郁闷了好久,最后琢磨出来是这个原因。

hammer.js会给直接绑定的元素自动增加禁止拖动和选择的属性,但如果该元素有子元素,则需要我们视情况对该处理的子元素进行处理。

hammer.js的使用说明也较少,所以有时候我们要输出ev来自己查看当前事件的一些属性。


参考资料1
移动端手势库hammerJS 2.0.4官方文档翻译


① 有资料说,pinch 和rotate 默认情况下是禁用的,因为他们会使元件闭锁(这里貌似是机翻),如有需要可以通过下面的方法调用:

hammertime.get('pinch').set({ enable: true });
hammertime.get('rotate').set({ enable: true });

不过我还没用到这个,没去试验。

移动设备触摸手势库——Hammer.JS