HTML5触摸事件详解 touchstart touchmove touchend实战指南

首页

编程语言

热心网友

转载

2026-05-07

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数组里通常已经没有东西了，因为对应手指的触摸活动已经结束。

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

touchstart
mouseover
mousemove (一次)
mousedown
mouseup
click
touchend

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

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

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

来源:https://www.jb51.net/article/85868.htm

免责声明：游乐网为非赢利性网站，所展示的游戏/软件/文章内容均来自于互联网或第三方用户上传分享，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系youleyoucom@outlook.com。

上一篇：JSP获取URL参数方法详解与实际应用场景下一篇：CSS hover选择器如何改变子元素与同级元素样式

相关攻略

编程语言

HTML5触摸事件详解 touchstart touchmove touchend实战指南

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

热心网友

05.07

前端开发

HTML5 LocalStorage如何保存视频清晰度偏好设置

利用HTML5的LocalStorage可存储用户偏好的视频分辨率。需监听用户选择并存储为字符串，页面初始化时读取并应用该设置。关键在于与播放器的清晰度切换功能联动，确保支持动态调整。同时需提供重置选项，并注意处理隐身模式等兼容性问题，用try catch保护核心逻辑。

热心网友

05.06

前端开发

如何使用HTML5中LocalStorage记录用户最后一次在搜索框选择的分类项

如何使用HTML5中LocalStorage记录用户最后一次在搜索框选择的分类项想让搜索框记住用户上次的选择，提升体验？其实方法很简单。核心思路就是利用浏览器的localStorage setItem()保存用户选中的分类，然后在页面加载时，用localStorage getItem()读取出来，

热心网友

05.03

前端开发

如何利用HTML5中DevicePostures检测手机是否处于半折叠状态并切换UI

如何利用HTML5中DevicePostures检测手机是否处于半折叠状态并切换UI 先说一个核心结论：如果你想通过原生的DevicePosture API来精确判断手机是否处于“半折叠”状态，目前（截至2024年）这条路还走不通。这个API尚未被主流浏览器稳定实现，其能力也相当有限，远未达到我们期

热心网友

05.03