触摸事件对象(TouchEvent)
TouchEvent是一类描述手指在触摸平面(触摸屏，触摸板等) 的状态变化的事件。这类事件用于描述一个或多个触点的移动，触点的增加和减少，等等
touchstart、touchmove、touchend三个事件对象
| 触摸列表 | 说明 |
| touches | 正在触摸屏幕所有手指的一个列表 |
| targetTouches | 正在触摸当前DOM元素上的手指的一个列表 |
| changedTouches | 手指状态发生了改变的列表，从无到有，从有到无变化 |
<style> div { width: 200px; height: 200px; background-color: coral; } </style> </head> <body> <div></div> </body> <script> // 触摸事件 // 1.获取元素 // 2.手指触摸DOM元素事件 var div = document.querySelector("div"); div.addEventListener("touchstart", function (e) { // console.log(e); // touches 正在触摸屏幕的所有手指的列表 // targetTouches 正在触摸当前DOM元素的手指列表 // 如果侦听到的是一个 DOM元素他们两个是一样的 // changedtouches 手指状态发生了改变列表 从无到有 或者 从有到无 // 因为我们一般都是触摸元素 所以最经常使用的是targetTouches console.log(e.targetTouches[0]); // tarrgetTouches[0] 就可以得到正在触摸dom元素的第一个手指的相关信息比如 手指的坐标 }); // 3.手指在DOM元素身上移动事件 // 长按显示继续摸 div.addEventListener("touchmove", function () {}); //松开鼠标 // 4.手指离开DOM元素事件 div.addEventListener("touchend", function () {}); </script>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具