在移动端网页开发中,触摸事件 touchstart、touchmove、touchend 按什么顺序触发?它们各自有哪些核心特点?
考察说明
考查对移动端触摸事件触发顺序及特性的掌握程度。
回答思路
- 【回答框架 1】触摸事件由手指接触屏幕触发,标准顺序为 touchstart 首先触发,表示手指按下;随后手指在屏幕上移动时连续触发 touchmove;手指离开屏幕时触发 touchend。此顺序与鼠标事件(mousedown、mousemove、mouseup)类似,但触摸事件专为触屏设计。
- 【回答框架 2】touchstart 在手指接触屏幕瞬间触发一次,可用于记录起点坐标或执行点击开始的操作。touchmove 在手指滑动过程中多次触发,频率高,事件对象中可获取 changedTouches 来获取当前位置,常用于实现拖拽或滑动效果,但需注意性能,避免在回调中执行重操作。
- 【回答框架 3】touchend 在手指离开屏幕时触发一次,可判断最终位置与起始位置的距离和方向,用于区分点击、滑动等手势。触摸事件对象通过 touches、targetTouches、changedTouches 列表获取触点信息,其中 changedTouches 在 touchend 中表示离开的触点。
- 【回答框架 4】触摸事件默认在冒泡阶段触发,可通过 addEventListener 监听;为提高滚动性能,浏览器对 touchmove 默认不阻止,如需禁止页面滚动需调用 preventDefault(),但需注意 passive 事件监听器的影响。
- 【回答框架 5】触摸事件与鼠标事件存在映射关系,但顺序上触摸事件先触发,随后可能触发兼容的鼠标事件,且触摸事件可覆盖多点触控,鼠标事件则不支持。
- 【关键点 1】标准触发顺序为 touchstart、touchmove、touchend,其中 touchmove 可多次触发。
- 【关键点 2】touchstart 和 touchend 各触发一次,touchmove 在滑动过程中持续触发。
- 【关键点 3】通过 changedTouches 获取最新触点位置,touchend 中表示离开的触点。
- 【关键点 4】touchmove 默认不阻止滚动,需要主动调用 preventDefault(),且注意 passive 监听器影响。
- 【关键点 5】触摸事件支持多点触控,与鼠标事件顺序上先于鼠标事件触发。
- 【易错点 1】混淆 touches、targetTouches、changedTouches 的适用时机,导致获取触点错误。
- 【易错点 2】忽略 touchmove 的高频触发,在回调中执行复杂计算造成卡顿。
- 【易错点 3】在 passive:true 的监听器中调用 preventDefault() 会无效,无法阻止滚动。