JavaScript中监听触摸开始与结束主要使用touchstart和touchend事件：前者在手指首次接触屏幕时触发，后者在手指离开时触发；事件对象提供touches、targetTouches和changedTouches三个属性用于获取触点信息。
在 JavaScript 中监听触摸屏设备的触摸开始与结束事件，主要使用原生的 touchstart 和 touchend 事件。它们是移动端 Web 开发中响应用户手势操作的基础。
基础事件绑定方式
这两个事件可直接通过 addEventListener 绑定到目标元素（如 document、body 或具体容器）上：
-
touchstart：当一个或多个手指首次接触触摸表面时触发（类似
mousedown） -
touchend：当一个或多个手指从触摸表面离开时触发（类似
mouseup） - 注意：即使只按下一个手指，也会触发事件；若多指同时触碰，仍只触发一次
touchstart（但event.touches会包含所有当前接触点）
获取触摸点信息
事件对象提供三个关键的类数组属性，用于区分不同阶段的触摸点：
-
event.touches：当前所有仍在接触屏幕的手指列表（实时变化） -
event.targetTouches：当前目标元素上正在接触的手指列表（推荐常用） -
event.changedTouches：本次事件中状态发生改变的手指（touchstart时是新接触的，touchend时是刚离开的）
例如，在 touchstart 中获取第一个触点坐标：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
element.addEventListener('touchstart', e => {
const touch = e.targetTouches[0];
console.log('X:', touch.clientX, 'Y:', touch.clientY);
});
避免与鼠标事件冲突
在混合设备（如带触摸屏的笔记本）上，浏览器可能同时触发 touchstart 和 mousedown。为防止重复响应：
- 可在
touchstart中调用e.preventDefault()阻止后续鼠标事件（需谨慎，会影响默认行为如滚动） - 更稳妥的做法是设置标志位，例如：
let hasTouch = false;，在touchstart中设为true，并在mousedown中检测该标志跳过处理 - 现代方案也可用
if ('ontouchstart' in window)或matchMedia('(hover: none) and (pointer: coarse)')判断是否为触控主设备
简单示例：实现按钮按下反馈
给一个按钮添加触摸高亮效果：
const btn = document.getElementById('myBtn');
btn.addEventListener('touchstart', () => {
btn.style.opacity = '0.7';
});
btn.addEventListener('touchend', () => {
btn.style.opacity = '1';
});
注意：不要依赖 touchcancel 做清理，除非需要处理中断场景（如弹窗遮挡、系统来电）；一般 touchend 已足够覆盖正常释放流程。
