微信小程序（触控事件）_小程序触摸事件

事件简介

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

事件类型

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

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

常见的事件类型

注意：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>
1
2
3
4
5

/**触控事件之单击tap */
bindtouchstartFn(event){
  console.log(event.timeStamp + '- touchstart')
},
bindtouchendFn(event){
  console.log(event.timeStamp + '- touchend')
},
bindtapFn(event){
  console.log(event.timeStamp + '-touchtap')
},
1
2
3
4
5
6
7
8
9
10

验证后可以发现tap顺序为touchstart→touchend→tap

（2）触控事件之双击

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

验证：

<button type="primary" bindtap="bindtapFn">双击</button>
1

  /**
   * 页面的初始数据
   * 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
})
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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

（3）触控事件之长按longtap

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

<button type="primary" bindtouchstart="bindtouchstartFn" bindlongtap="bindlongtapFn" bindtouchend="bindtouchendFn" bindtap="bindtapFn">点击</button>
1

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')
},
1
2
3
4
5
6
7
8
9
10
11
12

长按后控制台输出结果

翻译为：“\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')
  }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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

（3）触控事件之长按longpress

接下来将longtap改为longpress，进行测试

①长按后控制台输出

②单击时控制台输出

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

触发顺序小结

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

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

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

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

/**触控事件之滑动touch系列 */
bindtouchstartFn(event){
  console.log(event)
},
bindtouchmoveFn(event){
  console.log(event)
},
bindtouchendFn(event){
  console.log(event);
},
1
2
3
4
5
6
7
8
9
10

场景：一般滑动时需要获取滑动的方向或者滑动的距离，
例如整屏滑动：

1. 分析滑动的方向是否为上；
2. 分析滑动的距离是否大于最小滑动距离要求
3. 滑动手势
   
   以屏幕左上角为原点建立直角坐标系。第四象限为手机屏幕，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轴的投影长度之比，得出向右向下向左的滑动

①初始化数据

<button type="primary" 
bindtouchstart="bindtouchstartFn" 
bindtouchmove="bindtouchmoveFn"
bindtouchend="bindtouchendFn">点击</button>
1
2
3
4

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

②开始触摸

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

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

/**触摸点移动 */
  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
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

总结

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