HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)

HTML5实战与剖析之触摸事件

谈到HTML5的新事件，很多开发者可能会眼前一亮。不过，得先泼点冷水：虽然标准里添了不少新成员，但现实工作中，我们往往得优先考虑那些“能打仗”的——也就是兼容性广、经过实战检验的特性。今天，我们就聚焦在移动端开发中不可或缺的三个事件：touchstart、touchmove和touchend。

话说回来，这一套触摸事件的诞生，其实是为了解决一个很具体的问题。早期的iOS设备，像iPhone，既没有鼠标也没有物理键盘。你想，用传统PC端那套鼠标点击、键盘输入的事件模型，去开发移动网页的交互，是不是有点“隔靴搔痒”？正是为了给开发者提供更精准的触控信息，iOS版Safari浏览器率先引入了这一系列事件。很快，Android浏览器也跟进了，如今它们已成为移动Web开发的基石。

简单来说，当用户的手指接触屏幕、在屏幕上滑动、或者最终离开时，都会触发相应的触摸事件。下面我们来拆解一下：

touchstart事件：

当手指第一次接触到屏幕的那一刻，它就被触发了。哪怕屏幕上已经有一根手指了，新落下的手指依然会触发新的touchstart。

touchmove事件：

这个事件在手指于屏幕上滑动时，会连续不断地触发。这里有个很实用的技巧：在这个事件的处理函数中调用preventDefault()方法，可以阻止页面随之滚动，这对于实现自定义的拖拽或滑动组件至关重要。

touchend事件：

顾名思义，当手指从屏幕上抬起来时，它就来报到了。

touchcancel事件：

这个事件比较特殊，它会在系统停止跟踪此次触摸时触发。文档中对其确切触发场景描述得比较模糊，通常可能与系统中断（如来电）或手势识别冲突有关，我们可以将其视为一次触摸的意外终止。

需要注意的是，所有这些事件都支持“冒泡”，也都可以被取消。尽管它们并非源自传统的DOM规范，但其实现完全遵循DOM模式。因此，每个触摸事件的event对象都包含了我们熟悉的那些属性，比如clientX, clientY, screenX, screenY等。

然而，触摸事件的精华在于下面这三个专为跟踪触摸而生的属性：

touches：

这是一个数组，包含了当前屏幕上所有的触摸点（Touch对象）。

targetTouches：

这个数组更聚焦，它只包含当前事件目标元素上的触摸点。

changeTouches：

这个数组记录了自上次事件以来，发生了变化的触摸点。在touchend事件中，你想获取刚离开的那根手指的信息，就得靠它。

那么，每个Touch对象又携带了哪些信息呢？ 这就好比一个人的身份证，细节非常丰富：

clientX / clientY：

触摸点相对于浏览器视口的坐标。

pageX / pageY：

触摸点相对于整个文档页面的坐标，会计算滚动偏移。

screenX / screenY：

触摸点相对于设备屏幕的坐标。

identifier：

一个唯一ID，用于标识同一根手指的整个触摸过程（从start到end或cancel）。

target：

最初触发触摸事件的DOM元素。

光看理论确实有点枯燥，对吧？这些属性的妙处，非得在代码里过一遍才能真切体会。下面就是一个简单的实战示例：

Ja vaScript代码

function load (){
    document.addEventListener('touchstart', touch, false);
    document.addEventListener('touchmove', touch, false);
    document.addEventListener('touchend', touch, false);

    function touch (event){
        var event = event || window.event;
        var oInp = document.getElementById("inp");

        switch(event.type){
            case "touchstart":
                oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
                break;
            case "touchend":
                // 注意，touchend时用changeTouches
                oInp.innerHTML = "
Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
                break;
            case "touchmove":
                event.preventDefault(); // 阻止默认滚动
                oInp.innerHTML = "
Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
                break;
        }
    }
}
window.addEventListener('load', load, false);

HTML代码

在这个例子里，当手指落下（touchstart），触碰点的坐标会显示在div中。手指移动（touchmove）时，我们阻止了页面滚动，并实时更新坐标。当手指抬起（touchend），则通过changeTouches获取最终的触点信息。这里有个关键点：touchend触发时，touches数组里通常已经没有东西了，因为对应手指的触摸活动已经结束。

更有趣的是触摸事件与鼠标事件的协同（或者说“竞争”）关系。当你轻触一个可点击的元素时，浏览器为了保证旧有鼠标逻辑的兼容，会按顺序触发一系列事件：

1. touchstart
2. mouseover
3. mousemove (一次)
4. mousedown
5. mouseup
6. click
7. touchend

理解这个顺序对于处理混合交互和避免事件冲突非常重要。

最后，聊聊大家最关心的兼容性。支持touchstart, touchmove, touchend的浏览器阵营已经相当强大：包括iOS Safari、Android WebKit、Opera Mobile 10.1+、以及PC端的Firefox和Chrome也早已支持。不过需要注意的是，原生的多点触摸支持（即同时跟踪多个identifier）在早年主要还是iOS Safari的强项，如今现代浏览器的支持都已非常完善。

触摸事件是移动端交互的底层核心，掌握它们，就等于拿到了构建流畅移动体验的钥匙。希望今天的梳理能帮助你更好地在项目中运用它们。