Saber 酱的抱枕

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

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

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