HTML | DOM 触摸事件

在浏览器中，用户可以使用触摸屏幕的方式与网页进行交互，因此，Web应用程序需要支持用户使用手势的方式进行操作。而 HTML5 中提供了一组触摸事件（Touch Events），可以通过这些事件来捕捉用户在触屏设备上的手势操作。在本文中，我们将介绍 HTML | DOM 触摸事件的基本概念和使用方法。

触摸事件

在 HTML5 中，提供了如下触摸事件：

• touchstart：当用户触摸屏幕时触发。
• touchmove：当用户在屏幕上移动手指时触发。
• touchend：当手指从屏幕上离开时触发。
• touchcancel：当触摸事件被停止时触发（比如，弹出了系统的通知中心）。

捕捉触摸事件

要捕捉触摸事件，可以使用 DOM 事件进行注册。下面是一段简单示例代码：

<script>
    function handleTouchStart(event) {
        console.log("触摸开始: x=" + event.touches[0].pageX + ", y=" + event.touches[0].pageY);
    }
    function handleTouchMove(event) {
        console.log("触摸移动: x=" + event.touches[0].pageX + ", y=" + event.touches[0].pageY);
    }
    function handleTouchEnd(event) {
        console.log("触摸结束");
    }
    var element = document.getElementById("my-element");
    element.addEventListener("touchstart", handleTouchStart, false);
    element.addEventListener("touchmove", handleTouchMove, false);
    element.addEventListener("touchend", handleTouchEnd, false);
</script>

在这个示例中，我们使用了 addEventListener() 方法来注册了三个函数分别用于接收触摸事件。每个触摸事件都会传递一个 TouchEvent 对象。通过这个事件对象，我们可以得到触摸的位置、数量等信息。

Touch 对象

在触摸事件中，我们可以使用 TouchEvent 对象提供的多个 Touch 对象来描述多点触控事件。每个 Touch 对象都包含了触摸点（x,y坐标）、目标元素、时间戳等信息。例如，下面是一个简单示例代码：

var element = document.getElementById("my-element");
element.addEventListener("touchmove", function(event) {
    for (var i = 0; i < event.touches.length; i++) {
        var touch = event.touches[i];
        console.log("触摸点[" + i + "]在(" + touch.pageX + "," + touch.pageY + ")");
    }
}, false);

阻止默认行为

在多数情况下，触摸事件的默认行为是滚动窗口或缩放页面。如果我们想要在触摸事件中阻止默认行为，可以使用 preventDefault() 方法。例如，下面的代码可以在用户进行水平拖拽手势时，阻止页面的默认滚动行为：

element.addEventListener("touchmove", function(event) {
    var dx = event.changedTouches[0].pageX - startX;
    if (Math.abs(dx) > 10) { //  水平拖拽距离大于10，阻止默认行为
        event.preventDefault();
    }
}, false);

总结

HTML | DOM 触摸事件非常适合用于实现手势操作。使用它，我们可以捕捉到多点触控事件的信息，并且可以阻止默认的滚动或缩放行为。除了上面介绍的基本操作外，还可以结合 CSS3 动画和变形等技术，实现更加复杂的手势交互效果。