html不直接处理触摸事件，需用javascript的touchstart等监听器；移动端onclick有300ms延迟因双击缩放判断，touchstart无延迟但需preventdefault防重复触发；touchmove须preventdefault防滚动干扰，ios需passive:false；多点触摸应优先用targettouches并判空取坐标；复杂手势需自定义阈值逻辑，并处理touchcancel。
HTML 本身不直接处理触摸事件，真正起作用的是 JavaScript 的 touchstart、touchmove、touchend 等事件监听器——但必须在支持触摸的设备上（如手机、平板）且页面未禁用缩放或 touch 行为时才生效。
为什么 onclick 在手机上延迟大，而要用 touchstart
移动端浏览器为兼容双击缩放，会在 click 前等待约 300ms 判断是否为双击。这导致按钮响应“卡顿”。touchstart 没有这个延迟，触发更即时。
- 仅监听
touchstart就能解决点击延迟，但要注意：它不等同于“用户意图点击”，比如滑动时也会触发 - 若需模拟点击逻辑（如跳转、提交），建议同时监听
touchstart和click，并在touchstart中调用event.preventDefault()阻止后续 click（避免重复触发） - 部分安卓 WebView 或 iOS 低版本需加
cursor: pointerCSS 才让元素可触控（尤其div类非表单元素）
touchmove 怎么防止页面滚动干扰手势
做滑动轮播、拖拽排序时，手指一动就触发页面上下滚动，是因为默认行为未被阻止。
- 必须在
touchmove回调中调用event.preventDefault()，否则滚动照常发生 - 但不能无条件阻止：如果只是想禁止竖向滚动、允许横向滑动（如轮播图），得先判断移动方向：
Math.abs(deltaX) > Math.abs(deltaY)，再决定是否 prevent - 注意 iOS Safari 15+ 对
passive: false更严格，绑定时要显式写：element.addEventListener('touchmove', handler, { passive: false })
如何正确读取多点触摸的坐标（touches vs targetTouches）
手指按下时，event.touches 是当前所有接触屏幕的手指列表；event.targetTouches 是接触**当前事件目标元素**的手指列表。多数场景该用后者。
- 例如一个轮播容器内有多个子项，你只关心落在该容器上的手指，就用
event.targetTouches[0] -
event.changedTouches只包含本次事件中状态变化的手指（如刚按下的、刚抬起的），适合做“抬起即结束”逻辑 - 别直接解构
touches[0]后取clientX：要先判空，因为多指操作中某根手指抬起后touches长度会变 - 坐标推荐用
pageX/pageY，它不受滚动影响；clientX在页面滚动后可能不准
真正难的不是监听事件，而是区分“轻点”“长按”“快速滑动”“双指缩放”这些意图——它们都从同一组 touch 事件里来，需要自己记时间、算位移、设阈值。别漏掉 touchcancel：当系统中断触摸（比如来电、弹窗、切后台），它不会触发 touchend，必须单独处理清理逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
