首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript touch触摸事件

JavaScript touch触摸事件的使用讲解

2026-01-02 09:50:33 作者：韩曙亮

这篇文章主要介绍了JavaScript touch触摸事件的使用,JavaScript中的触摸事件对象TouchEvent是处理移动设备触摸交互的核心接口,承载了触摸操作的所有相关信息,需要的朋友可以参考下

一、TouchEvent触摸事件对象

1、TouchEvent概念

JavaScript 中的触摸事件对象 TouchEvent 是处理移动设备 ( 手机、平板等 ) 触摸交互的核心接口 ;

触摸事件对象 TouchEvent 是 DOM 事件接口的一种 , 专门用于表示触摸设备上的触点交互事件 , 它承载了触摸操作的所有相关信息 ( 如触点位置、数量、状态等 ) , 仅在支持触摸的设备 ( 移动端设备、带触摸屏的桌面设备 ) 上触发 ;

与普通鼠标事件 ( click、mousemove ) 不同 , TouchEvent 支持多点触摸 ( 多个手指同时触摸屏幕 ) , 这是它的核心特性 ;

2、TouchEvent的核心属性

触摸事件对象 TouchEvent 包含多个关键属性 , 其中最核心的是三个触摸列表属性 , 均为TouchList类型 , 类数组结构 , 包含多个 Touch 对象 ;

touches 属性 : 当前屏幕上所有活跃的触点 ( 无论触点是否针对当前元素 ) , 比如多手指触摸时 , 所有手指的触点都在此列表中 ;

targetTouches 属性 : 当前绑定事件的元素上的活跃触点 , 仅包含触摸在当前元素上的触点 , 排除其他元素上的触点 ;

changedTouches 属性 : 本次事件发生时状态发生变化的触点 ;

touchstart : 新增的触点 ( 刚按下的手指 )
touchmove : 移动的触点
touchend : 离开屏幕的触点 ( 抬起的手指 )
touchcancel : 被中断的触点

3、单个触点信息Touch对象

触摸事件对象 TouchEvent 的 touches、targetTouches 、changedTouches 都是 TouchList 类型 , TouchList 中的每一个元素都是 Touch 对象 , 它表示单个触摸触点的详细信息 ;

Touch对象的常用属性如下 :

identifier 属性 : 唯一标识触点的 ID ( 数字 ) , 用于区分多点触摸中的不同手指 , 避免混淆 ;
target 属性 : 触发触摸事件的元素 , 触点最初接触的 DOM 元素 ;
clientX / clientY 属性 : 触点相对于视口左上角的坐标 , 不包含滚动条偏移 ;
pageX / pageY 属性 : 触点相对于文档左上角的坐标 , 包含滚动条偏移 ;
screenX / screenY 属性 : 触点相对于屏幕左上角的坐标 , 设备物理屏幕坐标 ;

4、触摸事件对象TouchEvent对应的触摸事件类型

触摸事件对象 TouchEvent 对应的事件类型主要有 4 种 , 覆盖触摸的完整生命周期 :

touchstart 触摸开始事件 : 当手指首次触摸到屏幕时触发 ( 类似鼠标事件mousedown ) ;

        // 1. 绑定触摸开始事件 ( touchstart )  : 当手指首次触摸到元素时触发
        touchBox.addEventListener('touchstart', (e) => {
        	// e 是 TouchEvent 类型对象
            // 获取当前发生变化的触点列表 ( touchstart时为新增的触点 ) 
            const touchList = e.changedTouches;
            }
        });

touchmove 触摸移动事件 : 当手指在屏幕上滑动 ( 移动 ) 时持续触发 ( 类似鼠标事件mousemove ) ;

        // 2. 绑定触摸移动事件 ( touchmove )  : 当手指在元素上滑动移动时持续触发
        touchBox.addEventListener('touchmove', (e) => {
        	// e 是 TouchEvent 类型对象
            // 获取当前发生变化的触点列表 ( touchmove时为正在移动的触点 ) 
            const touchList = e.changedTouches;
            }
        });

touchend 触摸结束事件 : 当手指从屏幕上抬起 ( 离开 ) 时触发 ( 类似鼠标事件mouseup ) ;

        // 3. 绑定触摸结束事件 ( touchend )  : 当手指从元素上离开 ( 触摸完成 ) 时触发
        touchBox.addEventListener('touchend', (e) => {
        	// e 是 TouchEvent 类型对象
            // 获取当前发生变化的触点列表 ( touchend时为即将离开的触点 ) 
            const touchList = e.changedTouches;
        });

touchcancel 触摸取消事件 : 触摸事件被意外中断时触发 ( 如触摸过程中页面跳转、弹出系统弹窗、触摸区域被隐藏等 )

        // 4. 绑定触摸中断事件 ( touchcancel )  : 当触摸被意外中断时触发 ( 如来电、弹窗遮挡等 ) 
        touchBox.addEventListener('touchcancel', (e) => {
        	// e 是 TouchEvent 类型对象
            // 获取当前发生变化的触点列表 ( touchcancel时为被中断的触点 ) 
            const touchList = e.changedTouches;
        });

二、代码示例 - TouchEvent 触摸事件对象

1、代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TouchEvent 触摸对象示例</title>
    <style>
        .touchBox {
            /* ID 选择器 : 选中页面中 class 属性值为 " touchBox " 的 HTML 元素 , 开始定义该元素的样式集合 */
            /* 宽度设置 : 将元素宽度设为其父元素宽度的100% , 实现宽度自适应父容器 */
            width: 100%;
            /* 高度设置 : 给元素设置固定高度为300像素 , 元素高度不会随内容多少自动变化 ( 内容超出会溢出 )  */
            height: 200px;
            /* 背景颜色设置 : 为元素设置浅灰色背景 ( 十六进制颜色值#f0f0f0对应浅灰 )  , 填充元素的背景区域 */
            background-color: #f0f0f0;
            /* 边框设置 : 简写属性 , 同时设置元素四个方向的边框 ( 1像素宽、实线样式、浅灰色#ccc )  , 无需分别定义上下左右边框 */
            border: 1px solid #ccc;
            /* 外边距设置 : 简写属性 , 上下外边距为20像素 , 左右外边距为0 , 控制元素与其他元素的外部间距 */
            margin: 20px 0;
            /* 内边距设置 : 简写属性 , 四个方向 ( 上、右、下、左 ) 的内边距均为10像素 , 控制元素内容与边框的内部间距 */
            padding: 10px;
            /* 结束#touchBox元素的样式定义 */
        }
        .log {
            /* ID选择器 : 选中页面中 class 属性值为 " log " 的 HTML 元素 , 开始定义该元素的样式集合 */
            /* 高度设置 : 给元素设置固定高度为200像素 , 限制元素的垂直显示区域 */
            height: 300px;
            /* 垂直溢出处理 : 当元素内的内容高度超过 200 像素时 , 自动显示垂直滚动条 ; 内容未溢出时 , 不显示滚动条 */
            overflow-y: auto;
            /* 边框设置 : 简写属性 , 同时设置元素四个方向的边框 ( 1像素宽、实线样式、浅灰色#ccc )  , 勾勒元素轮廓 */
            border: 1px solid #ccc;
            /* 内边距设置 : 简写属性 , 四个方向的内边距均为10像素 , 避免内容紧贴边框 , 提升视觉效果 */
            padding: 10px;
            /* 结束 .log 元素的样式定义 */
        }
    </style>
</head>
<body>
    <div class="touchBox">触摸我 ( 支持多点触摸 ) </div>
    <div class="log"></div>
    <script>
        // 通过ID选择器获取页面中 class 为 "touchBox"的 DOM 元素 , 用于绑定触摸事件
        const touchBox = document.querySelector('.touchBox');
        // 通过ID选择器获取页面中 class 为 " log " 的 DOM 元素 , 用于展示触摸事件日志信息
        const log = document.querySelector('.log');
        // 日志打印函数 : 负责将触摸事件信息格式化后添加到日志容器中
        function printLog(content) {
            // 创建当前时间的本地化时间字符串 ( 格式如 : 14:23:45 )  , 用于日志时间戳
            const now = new Date().toLocaleTimeString();
            // 将新日志添加到日志容器顶部 ( 通过拼接 HTML , 新内容在前 , 原有内容在后 , 
实现换行 ) 
            log.innerHTML = `[${now}] ${content}
` + log.innerHTML;
            // 限制日志条数 : 当日志容器的子元素数量超过20条时 , 删除最后一条 ( 最旧的 ) 日志
            if (log.children.length > 20) {
                log.removeChild(log.lastChild);
            }
        }
        // 1. 绑定触摸开始事件 ( touchstart )  : 当手指首次触摸到元素时触发
        touchBox.addEventListener('touchstart', (e) => {
            // 阻止触摸事件的默认行为 ( 避免页面因触摸产生滚动、缩放等干扰操作 ) 
            e.preventDefault();
            // 获取当前发生变化的触点列表 ( touchstart时为新增的触点 ) 
            const touchList = e.changedTouches;
            // 遍历所有变化的触点 , 逐个打印详细信息
            for (let i = 0; i < touchList.length; i++) {
                const touch = touchList[i];
                // 打印touchstart事件详情 : 包含触点唯一ID、坐标、元素当前触点数、屏幕总触点数
                printLog(`【touchstart】触点ID : ${touch.identifier} , 坐标 ( pageX: ${touch.pageX}, pageY: ${touch.pageY} )  , 当前元素触点数 : ${e.targetTouches.length} , 屏幕总触点数 : ${e.touches.length}`);
            }
        });
        // 2. 绑定触摸移动事件 ( touchmove )  : 当手指在元素上滑动移动时持续触发
        touchBox.addEventListener('touchmove', (e) => {
            // 阻止触摸事件的默认行为 ( 避免滑动时触发页面滚动 ) 
            e.preventDefault();
            // 获取当前发生变化的触点列表 ( touchmove时为正在移动的触点 ) 
            const touchList = e.changedTouches;
            // 遍历所有移动的触点 , 打印实时位置信息
            for (let i = 0; i < touchList.length; i++) {
                const touch = touchList[i];
                // 打印touchmove事件详情 : 包含触点唯一ID和实时页面坐标
                printLog(`【touchmove】触点ID : ${touch.identifier} , 实时坐标 ( pageX: ${touch.pageX}, pageY: ${touch.pageY} ) `);
            }
        });
        // 3. 绑定触摸结束事件 ( touchend )  : 当手指从元素上离开 ( 触摸完成 ) 时触发
        touchBox.addEventListener('touchend', (e) => {
            // 阻止触摸事件的默认行为 ( 避免后续默认操作干扰 ) 
            e.preventDefault();
            // 获取当前发生变化的触点列表 ( touchend时为即将离开的触点 ) 
            const touchList = e.changedTouches;
            // 遍历所有即将离开的触点 , 打印离开时的信息
            for (let i = 0; i < touchList.length; i++) {
                const touch = touchList[i];
                // 打印touchend事件详情 : 包含触点唯一ID、离开坐标、元素剩余触点数、屏幕总触点数
                printLog(`【touchend】触点ID : ${touch.identifier} , 离开坐标 ( pageX: ${touch.pageX}, pageY: ${touch.pageY} )  , 剩余元素触点数 : ${e.targetTouches.length} , 屏幕总触点数 : ${e.touches.length}`);
            }
        });
        // 4. 绑定触摸中断事件 ( touchcancel )  : 当触摸被意外中断时触发 ( 如来电、弹窗遮挡等 ) 
        touchBox.addEventListener('touchcancel', (e) => {
            // 阻止触摸事件的默认行为
            e.preventDefault();
            // 获取当前发生变化的触点列表 ( touchcancel时为被中断的触点 ) 
            const touchList = e.changedTouches;
            // 遍历所有被中断的触点 , 打印中断信息
            for (let i = 0; i < touchList.length; i++) {
                const touch = touchList[i];
                // 打印touchcancel事件详情 : 包含触点唯一ID和中断提示
                printLog(`【touchcancel】触点ID : ${touch.identifier} , 被中断`);
            }
        });
    </script>
</body>
</html>

2、执行结果

以上就是JavaScript touch触摸事件的使用讲解的详细内容，更多关于JavaScript touch触摸事件的资料请关注脚本之家其它相关文章！