【Web APIs】JavaScript touch 触摸事件 ① ( touchstart 触摸开始事件 | touchmove 触摸移动事件 | touchend 触摸结束事件 )
文章目录
一、JavaScript touch 触摸事件
touchstart、touchmove、touchend 事件是 JavaScript 专为支持 触摸操作 的 移动设备( 手机、平板等 ) 设计的核心触摸事件, 用于 监听用户的触摸行为 , 构成了 完整的 触摸生命周期 ;
1、 touchstart 触摸开始事件
touchstart 触摸开始事件 :
- 核心定义 : 在 用户的手指首次接触到触摸 设备屏幕 ( 或指定触摸元素 ) 的瞬间, 立即触发该事件 ,标志着一次触摸行为的正式开始;
- 关键特性 : 每个触摸点( 单手指 / 多手指 ) 仅 触发一次( 手指保持接触时不会重复触发 ) ;
- 常用场景 :
- 初始坐标 :记录触摸的初始坐标, 为后续判断滑动方向做准备 ;
- 触摸激活 :触发元素的 触摸激活状态, 如按钮按下时的高亮样式 ;
- 初始触摸 :初始化 手写板、画布涂鸦等 触摸相关业务逻辑 ;
2、touchmove 触摸移动事件
touchmove 触摸移动事件 :
- 核心定义 : 当用户的手指保持 与 屏幕 接触状态 并 发生位置移动 时, 会持续、高频触发该事件, 直到手指停止移动 或 离开屏幕 ;
- 关键特性 : 移动过程中连续触发, 触发频率 由 设备性能、手指移动速度 决定 , 事件对象会实时更新触摸点的当前位置 ;
- 常用场景 :
- 滑动交互 : 实现 滑动交互 , 如 轮播图左右滑动、下拉刷新、侧边栏拖拽 ;
- 实时绘制 : 手写板 轨迹跟随、涂鸦创作 ;
- 触摸跟随 : 如 悬浮按钮 随手指移动 ;
3、touchend 触摸结束事件
touchend 触摸结束事件 :
- 核心定义 : 当用户的手指从屏幕上抬起 ( 完全离开触摸区域 ) 的 瞬间, 触发该事件 , 标志着一次触摸行为的结束 ;
- 关键特性 :每个 触摸点 仅 触发一次, 事件对象中仍可获取该触摸点离开前的最后位置信息 ;
- 常用场景 :
- 结束滑动 :结束 滑动逻辑 并判断 滑动结果, 如 : 轮播图滑动后定位到目标页面 ;
- 保存结果 : 保存 手写绘制、涂鸦 的最终内容 ;
- 恢复状态 :恢复 元素 的 初始状态, 如 : 按钮抬起后取消高亮 ;
- 触发回调 :触发 触摸结束 后的 业务回调 , 如 : 滑动完成后的数据加载 ;
二、代码示例 - touch 触摸事件
1、代码示例
代码示例 :
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>touch 触摸事件</title><style>div{width: 200px;height: 200px;background-color: pink;}</style></head><body><div></div><script>// 1. 获取元素// 声明一个变量 div , 用于存储获取到的页面元素 , 在整个文档中查询并获取第一个匹配的<div>标签元素 , 将其赋值给变量divvar div = document.querySelector('div');// 2. 手指触摸事件 , 为获取到的 div 元素添加事件监听器 , 监听触摸开始事件 ( touchstart ) div.addEventListener('touchstart',function(){ console.log('touchstart 开始触摸');});// 3. 手指移动事件 , 为获取到的 div 元素添加事件监听器 , 监听触摸移动事件 ( touchmove ) div.addEventListener('touchmove',function(){ console.log('touchmove 触摸移动');});// 4. 手指离开事件 , 为获取到的 div 元素添加事件监听器 , 监听触摸结束事件 ( touchend ) div.addEventListener('touchend',function(){ console.log('touchend 抬起手指');});</script></body></html>2、执行结果
执行结果 :
进入界面后 , 如果是 Web 模式 , 此时 是 无法触发 触摸事件 的 , 当前状态是 " 普通桌面浏览模式 " , 此时 无法触发 触摸事件 ;
点击上图的 红色矩形框 中的 " Toggle device toolbar " 按钮 , 也可以使用 Ctrl + Shift + M 快捷键 , 快速切换 " 设备模拟模式 " 与 " 普通桌面浏览模式 " , 下面是 切换为 " 设备模拟模式 " 状态 ;
触摸事件 完整执行结果 ;
