JS触摸事件、手势事件详解

什么是触摸事件和手势事件

触摸事件是基于触摸输入设备，如手机屏幕，触发的事件。触摸事件包含以下几种：

touchstart：手指触摸屏幕时触发；
touchmove：手指在屏幕上滑动时连续触发；
touchend：手指离开屏幕时触发；
touchenter：手指触摸到一个DOM元素时触发；
touchleave：手指离开一个DOM元素时触发；
touchcancel：系统取消触摸事件的时候触发，例如来电时。

手势事件是基于一系列手指动作的事件，可以识别更为复杂的手势。手势事件包含以下几种：

pinch：用两个手指收缩或伸张时触发；
rotate：用两个手指旋转时触发；
swipe：手指在屏幕上向左、右、上、下滑动时触发；
tap：手指在屏幕上轻触时触发。

如何使用触摸事件

首先，HTML元素上需要监听触摸事件：

<div id="touch"></div>

然后，在JavaScript中处理触摸事件，例如监听touchstart：

const touchDom = document.getElementById('touch');

touchDom.addEventListener('touchstart', function(event) {
  event.preventDefault(); // 阻止默认事件，例如页面滚动
  console.log('Touch start.');
});

在这个例子中，当用户在 touchDom 元素上触碰屏幕时，监听到了touchstart事件，打印出 Touch start. 的信息。

如何使用手势事件

手势事件与触摸事件使用类似，但需要使用第三方库，例如Hammer.js：

HTML：

<div id="touch"></div>

JavaScript：

const touchDom = document.getElementById('touch');

const mc = new Hammer.Manager(touchDom);

mc.add(new Hammer.Pinch());
mc.add(new Hammer.Rotate());
mc.add(new Hammer.Swipe());
mc.add(new Hammer.Tap());

mc.on("pinch rotate swipe tap", function(event) {
  console.log(event.type);
});

在这个例子中，我们创建了 Hammer.Manager 实例，然后在其中添加手势事件类型，同时添加处理函数，根据event的type属性可以判断监听到了哪种手势事件，在这里简单打印出了事件类型。