微信小程序 触控事件详细介绍

在微信小程序开发中，触控事件是非常重要的一部分，掌握触控事件可以让我们更好地掌控页面的交互体验。接下来，我们将详细介绍微信小程序中常用的触控事件。

原生触控事件

微信小程序中，原生支持的触控事件有：

touchstart

当手指触摸屏幕并开始移动时触发，即手指触摸屏幕的瞬间会触发一次。可以通过 event.touches 事件对象获取到手指的信息。

<view bindtouchstart="touchStart"></view>

Page({
  touchStart(event) {
    console.log(event.touches[0]) // 打印第一个手指的信息
  }
})

touchmove

当手指在屏幕上移动时触发，即手指在屏幕上滑动时会触发多次。同样可以通过 event.touches 事件对象获取到手指的信息。

<view bindtouchmove="touchMove"></view>

Page({
  touchMove(event) {
    console.log(event.touches[0]) // 打印第一个手指的信息
  }
})

touchend

当手指从屏幕上离开时触发，即手指离开屏幕的瞬间会触发一次。同样可以通过 event.changedTouches 事件对象获取到手指的信息。

<view bindtouchend="touchEnd"></view>

Page({
  touchEnd(event) {
    console.log(event.changedTouches[0]) // 打印第一个手指的信息
  }
})

touchcancel

当系统停止跟踪手指移动时触发，如手指移动到了系统界面以外或被其他事件（如电话呼入）打断。同样可以通过 event.changedTouches 事件对象获取到手指的信息。

<view bindtouchcancel="touchCancel"></view>

Page({
  touchCancel(event) {
    console.log(event.changedTouches[0]) // 打印第一个手指的信息
  }
})

自定义触控事件

除了原生的触控事件，我们也可以自定义触控事件。自定义触控事件需要使用 wx.createSelectorQuery() 方法选择节点，然后使用 node.on() 方法监听事件。

自定义 tap 事件

自定义的 tap 事件可以用来响应用户的轻触操作。

<canvas canvas-id="myCanvas"></canvas>

Page({
  onLoad() {
    const query = wx.createSelectorQuery()
    // 选择 canvas 节点
    query.select('#myCanvas').node().exec((res) => {
      const canvas = res[0].node
      // 监听 tap 事件
      canvas.on('tap', (event) => {
        console.log('tap')
      })
    })
  }
})

自定义 longtap 事件

自定义的 longtap 事件可以用来响应用户的长按操作。

<canvas canvas-id="myCanvas"></canvas>

Page({
  onLoad() {
    const query = wx.createSelectorQuery()
    // 选择 canvas 节点
    query.select('#myCanvas').node().exec((res) => {
      const canvas = res[0].node
      // 监听 longtap 事件
      canvas.on('longtap', (event) => {
        console.log('longtap')
      })
    })
  }
})

总结一下，微信小程序中的触控事件包括原生的 touchstart、touchmove、touchend、touchcancel 事件，另外我们也可以自定义触控事件，例如 tap、longtap 等。通过掌握这些事件，我们可以为用户提供更好的交互体验。