前端/移动开发面试题更新 2026-08-05

在移动端网页开发中,触摸事件 touchstart、touchmove、touchend 按什么顺序触发?它们各自有哪些核心特点?

前端/移动开发技术原理

考察说明

考查对移动端触摸事件触发顺序及特性的掌握程度。

回答思路

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