微信小程序（触控事件）

淡淡的烟草味﹌ 2023-06-17 14:55 20阅读 0赞

# 事件简介 #

1.  本质：事件是视图层到逻辑层的通讯方式
2.  作用：事件可以将用户的行为反馈到逻辑层进行处理
3.  应用：事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数
4.  参数：事件对象可以携带额外信息，如 id， dataset， touches

# 事件类型 #

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

1.  单击—tap
2.  长按—longtap
3.  滑动—touchstart、touchmove、touchend、touchcancel

###### 常见的事件类型 ######

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>触发条件</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>touchstart</td> 
   <td>手指触摸动作开始</td> 
  </tr> 
  <tr> 
   <td>touchmove</td> 
   <td>手指触摸后移动</td> 
  </tr> 
  <tr> 
   <td>touchcancel</td> 
   <td>手指触摸动作被打断，如来电提醒，弹窗</td> 
  </tr> 
  <tr> 
   <td>touchend</td> 
   <td>手指触摸动作结束</td> 
  </tr> 
  <tr> 
   <td>tap</td> 
   <td>手指触摸后马上离开</td> 
  </tr> 
  <tr> 
   <td>longtap</td> 
   <td>手指触摸后，超过350ms再离开</td> 
  </tr> 
  <tr> 
   <td>longpress</td> 
   <td>longtap升级版，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发</td> 
  </tr> 
 </tbody> 
</table>

> **注意**：touch触屏系列事件常结合画布canvas组件使用，简单了解即可

# 事件绑定 #

###### 事件绑定的写法同组件的属性，以 key、value 的形式 ######

1.  key 以**bind或catch**开头，然后跟上事件的类型，如bindtap、catchtap等。自基础库版本 1.5.0 起，在非原生组件中，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart
2.  value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错
3.  bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡

# 触控事件 #

### （1）触控事件之单击tap ###

验证：

<view>触控事件之单击tap</view>
    <button type="primary" 
    bindtouchstart="bindtouchstartFn" 
    bindtouchend="bindtouchendFn" 
    bindtap="bindtapFn">点击</button>

/**触控事件之单击tap */
    bindtouchstartFn(event){ 
      console.log(event.timeStamp + '- touchstart')
    },
    bindtouchendFn(event){ 
      console.log(event.timeStamp + '- touchend')
    },
    bindtapFn(event){ 
      console.log(event.timeStamp + '-touchtap')
    },

![在这里插入图片描述][20191129145135626.png]  
验证后可以发现tap顺序为touchstart→touchend→tap

### （2）触控事件之双击 ###

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

验证：

/** * 页面的初始数据 * 1、判断是否是第一次触摸屏幕，因为如果是第一次触摸屏幕无法完成双击，因为双击时间必须是第二次或者往后更多次才能完成； * 2、判断当前点击时的时间节点和上一次点击的时间节点做比较 */
      data: { 
        /**最后触摸页面时的距离页面打开的毫秒数，默认为0 */
        lastTimeStamp: 0,
      }
    /**触摸事件，判断单击还是双击 */
    bindtapFn(event){ 
      var timeStamp = event.timeStamp;/**触摸时距离页面打开的毫秒数 */
      var lastTimeStamp = this.data.lastTimeStamp;/**上一次触摸距离页面打开的毫秒数 */
    if(lastTimeStamp>0){ 
      /**不是第一次触摸 */
      if(timeStamp-lastTimeStamp<600){ 
        console.log(event.timeStamp + '双击')
      }else{ 
        console.log(event.timeStamp + '单击')
      }
    }else{ 
      /**第一次触摸 */
      console.log(event.timeStamp + '第一次单击')
    }
    /**将本次时间设置为最后一次触摸时间 */
    this.setData({ 
      lastTimeStamp:timeStamp
    })
    },

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

### （3）触控事件之长按longtap ###

长按事件手指触摸后，超过350ms再离开，触发长按事件longtap

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

长按后控制台输出结果  
![在这里插入图片描述][2019112916364297.png]  
翻译为：“\\longtap\\”事件已弃用，请改用“longpress”事件，所以接下来将longtap改为longpress  
触发顺序：touchstart → longtap → touchend → tap

*  **开发问题**：通过上个案例，可以看出一个元素上同时绑定了点击事件与长按事件时，当长按事件触发时，点击事件也会被触发
 *  **解决办法**：记录手指点下与手指抬起之间的时间差 ，在触发tap事件前 判断时间差，若小于350 就触发tap ，否则视为长按

data: { 
        touchStartTime:0,
        touchEndTime:0,
      },
      /**触控事件之单击tap */
    /**手指触摸动作开始 */
    bindtouchstartFn(event){ 
      console.log(event.timeStamp + '- touchstart')
      this.setData({ 
        touchStartTime:event.timeStamp
      })
    },
    /**手指触摸后，超过350ms再离开，即长按事件 * 补充：longpresslongtap升级版，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发 */
    bindlongtapFn(event){ 
      console.log(event.timeStamp + -'touchlongtap')
    },
    /**手指触摸动作结束 */
    bindtouchendFn(event){ 
      console.log(event.timeStamp + '- touchend')
      this.setData({ 
        touchEndTime:event.timeStamp
      })
    },
    /**单击事件，手指触摸动作开始并结束 */
    bindtapFn(event){ 
      if(this.data.touchEndTime-this.data.touchStartTime<350){ 
       console.log(event.timeStamp + '-touchtap')
      }
    },

> 思路：计算touchend与touchstart的时间差，如果大于350ms，则不会触发bindtap相关事件。

### （3）触控事件之长按longpress ###

接下来将longtap改为longpress，进行测试  
![在这里插入图片描述][20191129163732476.png]  
①长按后控制台输出  
![在这里插入图片描述][20191129163827958.png]  
②单击时控制台输出  
![在这里插入图片描述][20191129163851290.png]

> 总结：  
> 验证后发现，longpress长按事件已经避免了旧版longtap事件与tap事件同时触发的bug，所以以后开发用longpress解决长按事件即可。

###### 触发顺序小结 ######

单击、双击、长按属于点触事件，会触发touchstart、touchend、tap事件

<table> 
 <thead> 
  <tr> 
   <th>事件</th> 
   <th>触发顺序</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>单击</td> 
   <td>touchstart→touchend→tap</td> 
  </tr> 
  <tr> 
   <td>双击</td> 
   <td>touchstart→touchend→tap→touchstart→touchend→tap</td> 
  </tr> 
  <tr> 
   <td>长按</td> 
   <td>touchstar→longtapt→touchend→tap</td> 
  </tr> 
 </tbody> 
</table>

### （4）触控事件之滑动touch系列 ###

滑动事件由touchstart、touchmove、touchend组成，一般指的是手指触摸屏幕并移动

<view>触控事件之touch系列</view>
    <button type="primary" 
    bindtouchstart="bindtouchstartFn" 
    bindtouchmove="bindtouchmoveFn"
    bindtouchend="bindtouchendFn">点击</button>

/**触控事件之滑动touch系列 */
    bindtouchstartFn(event){ 
      console.log(event)
    },
    bindtouchmoveFn(event){ 
      console.log(event)
    },
    bindtouchendFn(event){ 
      console.log(event);
    },

![在这里插入图片描述][20191129172502456.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]  
**场景**：一般滑动时需要获取滑动的方向或者滑动的距离，  
**例如整屏滑动**：

1.  分析滑动的方向是否为上；
2.  分析滑动的距离是否大于最小滑动距离要求
3.  滑动手势  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]  
    以屏幕左上角为原点建立直角坐标系。第四象限为手机屏幕，Y轴越往下坐标值越大（注意跟数学象限的区别）

###### 坐标轴及业务逻辑分析： ######

1.  假设A点为touchstart事件触摸点，坐标为A(ax,ay)，然后手指向上滑动到点B(bx,by)，就满足条件by < ay
2.  同理，向右滑动到C(cx,cy),满足cx > ax；向下滑动到D(dx,dy),满足dy > ay；向左移动到E(ex，ey)满足ex < ax
3.  计算线段AB在Y轴上投影长度为m,在X轴上的投影长度为n
4.  计算r = m/n,如果r > 1,视为向上滑动，同理计算线段AC,AD,AE在Y轴投影长度与X轴的投影长度之比，得出向右向下向左的滑动

**①初始化数据**

data: { 
        /**初始化touchstart坐标 */
        startPoint:[0,0]
      },

**②开始触摸**

/**开始触摸 */
      bindtouchstartFn: function(e){ 
      this.setData({ 
        /**开始触摸，获取触摸点坐标并放入数组中 */
        startPoint: [e.touches[0].pageX, e.touches[0].pageY]
      })
    },

**③触摸点移动，动态计算判断方向**

/**触摸点移动 */
      bindtouchmoveFn: function(e){ 
      /**当前触摸点坐标 */
      var curPoint = [e.touches[0].pageX,e.touches[0].pageY];
      var startPoint = this.data.startPoint;
      /**比较pageX值 */
      if(curPoint[0]<=startPoint[0]){ 
        if(Math.abs(curPoint[0] - startPoint[0]) >= Math.abs(curPoint[1] - curPoint[1])){ 
          console.log(e.timeStamp + '- touch left move')
        }else{ 
          if(curPoint[1] >= startPoint[1]){ 
            console.log(e.timeStamp + '- touch down move')
          }else{ 
            console.log(e.timeStamp + '- touch up move')
          }
        }
      } else {  
        if(Math.abs(curPoint[0] - startPoint[0] >= Math.abs(curPoint[1] - startPoint[1]))){ 
          console.log(e.timeStamp + '- touch right move')
        }else{ 
          if(curPoint[1] >= startPoint[1]){ 
            console.log(e.timeStamp + '- touch down move')
          }else{ 
            console.log(e.timeStamp + '- touch up move')
          }
        }
      }
    },

### 总结 ###

1.  事件简介
2.  事件类型
3.  事件绑定
4.  触控事件  
    ①单击tap；②自定义双击处理；③长按longtap与longpress；④touch系列之touchstart、touchmove、touchend

[20191129145135626.png]: https://img-blog.csdnimg.cn/20191129145135626.png
[2019112916364297.png]: https://img-blog.csdnimg.cn/2019112916364297.png
[20191129163732476.png]: https://img-blog.csdnimg.cn/20191129163732476.png
[20191129163827958.png]: https://img-blog.csdnimg.cn/20191129163827958.png
[20191129163851290.png]: https://img-blog.csdnimg.cn/20191129163851290.png
[20191129172502456.png]: https://img-blog.csdnimg.cn/20191129172502456.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191129172723182.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191129172758657.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70