微信小程序（触控事件）

事件类型

在编写代码中，使用频率高的事件方式是

事件类型

常见的事件类型

事件绑定

事件绑定的写法同组件的属性，以 key、value 的形式
①key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtap等。自基础库版本 1.5.0 起，在非原生组件中，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart
②value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错
③bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡
（1）触控事件之单击tap
分析：单击事件由touchstart、touchend组成,touchend后触发tap事件。

事件对象event：当事件回调触发的时候，逻辑层绑定该事件的处理函数会收到一个事件对象，event对象包含参数timeStamp

触控事件

<button
    type="primary"
    bindtouchstart="bindtouchstartFn"
    bindtouchend="bindtouchendFn"
    bindtap="bintapFn"
>点击</button>

 bindtouchstartFn(event){
   
    console.log(event.timeStamp + '-touchstart')
  },
  bindtouchendFn(event){
   
    console.log(event.timeStamp + '-touchend')
  },
  bintapFn(event){
   
   console.log(event.timeStamp + 'touchtap')
  },

验证后可以发现tap顺序为touchstart→touchend→tap
（2）触控事件之双击
注意：
微信官方文档没有双击事件，需要开发者自己定义处理。
分析：
双击事件可以由两个单击事件组成，只要两次点击的间隔时间小于600ms（或者300ms）则认为是双击行为；
顺序：
双击执行顺序为touchstart → touchend → tap → touchstart → touchend → tap
（2）触控事件之双击
验证：

<button
    type="primary"
    bindtap="bintapFn"
>点击</button>

data: {
   
    //最后触摸页面时的距离页面大开的毫秒数 默认为0
      lastTiemStamp:0
  },

此时如果点击按钮的时间间隙小于600ms，则会认为是双击行为。

data: {
   
    //初始化touchstart坐标
    lastTiemStamp: 0
  },
  //触摸事件判断单机还是双击
  bintapFn(event) {
   
    //触摸式打开页面的毫秒数
    var timeStamp = event.timeStamp;
    //上一次触摸页面距离打开的毫秒数
    var lastTimeStamp = this.data.lastTimeStamp;
    if (lastTimeStamp > 0) {
   
      //不是第一次触摸
      if (timeStamp - lastTimeStamp < 600) {
   
        console.log(event.timeStamp +