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属性可以判断监听到了哪种手势事件，在这里简单打印出了事件类型。

总结

触摸事件和手势事件是基于手指输入的交互方式，可以丰富Web应用的交互方式，提升用户体验。触摸事件和手势事件的使用方式和API比较简单，但需要灵活运用，根据实际需求选择适合的事件类型和处理方式。

以上是关于JS触摸事件、手势事件的详细攻略。