触摸事件中touchstar、touchmove、touchend、touchcancel事件应用方法及实例

在移动端开发中，触摸事件是非常常见的一种事件，而其中最常用的就是touchstart、touchmove、touchend、touchcancel事件。

1. touchstart事件

当手指触摸屏幕时，会触发touchstart事件。touchstart事件触发后，会返回一个TouchEvent对象，其中包含了一些关于触摸点的信息，如触摸点的坐标、触摸点的标识符等。

以下是一个touchstart事件的实例：

document.addEventListener('touchstart', function(event) {
  console.log('触摸点的坐标：', event.touches[0].clientX, event.touches[0].clientY);
});

2. touchmove事件

当手指在屏幕上移动时，会触发touchmove事件。和touchstart事件一样，touchmove事件也会返回一个TouchEvent对象，其中包含了关于移动后触摸点的信息。

以下是一个touchmove事件的实例：

document.addEventListener('touchmove', function(event) {
  console.log('移动后触摸点的坐标：', event.touches[0].clientX, event.touches[0].clientY);
});

3. touchend事件

当手指离开屏幕时，会触发touchend事件。touchend事件同样会返回一个TouchEvent对象，其中包含了关于离开屏幕后的触摸点信息。

以下是一个touchend事件的实例：

document.addEventListener('touchend', function(event) {
  console.log('离开屏幕后的触摸点的坐标：', event.changedTouches[0].clientX, event.changedTouches[0].clientY);
});

4. touchcancel事件

当由于某些原因（如系统中断）触摸事件被取消时，会触发touchcancel事件。touchcancel事件同样会返回一个TouchEvent对象，其中包含了关于取消前的触摸点信息。

以下是一个touchcancel事件的实例：

document.addEventListener('touchcancel', function(event) {
  console.log('取消前的触摸点的坐标：', event.touches[0].clientX, event.touches[0].clientY);
});

以上就是touchstart、touchmove、touchend、touchcancel事件的应用方法及实例。