touchstart

基础信息说明

功能概述：

• window.addEventListener("touchstart", callback, false)：监听开始触摸事件
• window.removeEventListener("touchstart", callback)：取消监听开始触摸事件

参数说明

window.addEventListener("touchstart", callback, false)

window.removeEventListener("touchstart", callback)

返回值说明

同步方法：addEventListener 和 removeEventListener 均为同步接口，调用后立即返回，无返回值。

回调结果说明

• touchstart 事件为异步事件回调。addEventListener 方法用于注册回调函数，该回调函数会在手指触摸屏幕时被异步触发，而不是在注册时立即执行。

触摸事件回调由底层触摸系统在用户触摸屏幕时触发。回调的触发时机如下：

• touchstart：当手指触摸屏幕时立即触发

回调成功

touchstart 回调

TouchEvent 对象属性

运行时对象上还存在 _type、_target 等内部字段，请根据实际情况使用。

Touch 对象属性说明

示例代码

// 定义触摸开始事件处理函数（最简示例）
function handleTouchStart(event) {
  // 直接查看回调入参（TouchEvent）
  console.log('touchstart event:', event)

  // 常见：查看第一个触摸点（Touch）
  const firstTouch = event?.touches?.[0]
  console.log('first touch:', firstTouch)
}

// 注册与移除监听（需要相同函数引用）
window.addEventListener('touchstart', handleTouchStart, false)
// window.removeEventListener('touchstart', handleTouchStart, false)

注意事项

• addEventListener 和 removeEventListener 必须使用同一个函数引用才能正确移除监听
• 如果使用匿名函数作为回调，将无法通过 removeEventListener 移除监听
• touchstart 事件在手指刚接触屏幕时立即触发，通常用于检测触摸开始
• 支持多点触摸，touches 数组包含所有当前触摸点
• changedTouches 数组包含本次事件中新增的触摸点

touchmove

基础信息说明

功能概述：

• window.addEventListener("touchmove", callback, false)：监听触点移动事件
• window.removeEventListener("touchmove", callback)：取消监听触点移动事件

参数说明

window.addEventListener("touchmove", callback, false)

window.removeEventListener("touchmove", callback)

返回值说明

同步方法：addEventListener 和 removeEventListener 均为同步接口，调用后立即返回，无返回值。

回调结果说明

touchmove 事件为异步事件回调。addEventListener 方法用于注册回调函数，该回调函数会在手指在屏幕上移动时被异步触发，而不是在注册时立即执行。

触摸事件回调由底层触摸系统在用户移动手指时触发。

回调成功

touchmove 回调

Touch 对象属性

示例代码

// 定义触摸结束事件处理函数（最简示例）
function handleTouchEnd(event) {
  console.log('touchend event:', event)

  // 常见：查看第一个离开屏幕的触点（Touch）
  const firstChanged = event?.changedTouches?.[0]
  console.log('first changed touch:', firstChanged)
}

// 注册与移除监听（需要相同函数引用）
window.addEventListener('touchend', handleTouchEnd, false)
// window.removeEventListener('touchend', handleTouchEnd, false)

注意事项

• addEventListener 和 removeEventListener 必须使用同一个函数引用才能正确移除监听
• 如果使用匿名函数作为回调，将无法通过 removeEventListener 移除监听
• touchend 事件在手指离开屏幕时触发，通常用于检测触摸结束或完成点击操作
• 支持多点触摸，touches 数组包含所有当前仍在屏幕上的触摸点（已离开的触摸点不在其中）
• changedTouches 数组包含本次事件中离开的触摸点
• touchend 事件中的坐标是手指离开屏幕时的最后位置

touchcancel

基础信息说明

功能描述：监听/取消监听触点失效事件，当触摸事件被系统取消时触发该事件（例如来电、系统弹窗等中断触摸操作）

• window.addEventListener("touchcancel", callback, false)：监听触点失效事件
• window.removeEventListener("touchcancel", callback)：取消监听触点失效事件

参数说明

window.addEventListener("touchcancel", callback, false)

window.removeEventListener("touchcancel", callback)

返回值说明

同步方法：addEventListener 和 removeEventListener 均为同步接口，调用后立即返回，无返回值。

回调结果说明

touchcancel 事件为异步事件回调。addEventListener 方法用于注册回调函数，该回调函数会在触摸事件被系统取消时被异步触发，而不是在注册时立即执行。

回调成功

touchend 回调

TouchEvent 对象属性

可通过 event.changedTouches.item(0) 或 event.changedTouches[0] 访问第一个被取消的触点。

Touch 对象属性

示例代码

// 定义触点失效事件处理函数（最简示例）
function handleTouchCancel(event) {
  console.log('touchcancel event:', event)

  // 常见：查看第一个被系统取消的触点（Touch）
  const firstCancelled = event?.changedTouches?.[0]
  console.log('first cancelled touch:', firstCancelled)
}

// 注册与移除监听（需要相同函数引用）
window.addEventListener('touchcancel', handleTouchCancel, false)
// window.removeEventListener('touchcancel', handleTouchCancel, false)

注意事项

• addEventListener 和 removeEventListener 必须使用同一个函数引用才能正确移除监听
• 如果使用匿名函数作为回调，将无法通过 removeEventListener 移除监听
• touchcancel 事件在触摸操作被系统中断时触发，通常需要在此事件中清理触摸相关的状态
• 支持多点触摸，touches/targetTouches 为 TouchList，包含所有当前仍在屏幕上的触摸点（被取消的触摸点不在其中）
• changedTouches 为 TouchList，包含本次事件中被取消的触摸点
• touchcancel 事件中的坐标是触摸被取消时的最后位置
• 常见的触发场景：来电、系统弹窗、应用切换到后台、触摸操作超出有效区域等
• 建议在 touchcancel 事件中执行与 touchend 类似的清理操作，以确保应用状态的一致性