微信小程序教程(第十五篇)

事件触发顺序

事件分类

• touchstart 手指触摸

• touchmove 手指触摸后移动

• touchcancel 手指触摸动作被打断，如弹窗和来电提醒

• touchend 手指触摸动作结束

• tap 手指触摸后离开

• longtap 手指触摸后后，超过350ms离开

1.单击

单击事件由touchstart、touchend组成,touchend后触发tap事件。

2.双击

双击事件由两个单击事件组成，两次间隔时间小于300ms认为是双击；微信官方文档没有双击事件，需要开发者自己定义处理。

3.长按

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

4.滑动

手指触摸屏幕并移动，为了简化起见，下面以水平滑动和垂直滑动为例。 滑动事件由touchstart、touchmove、touchend组成

1. 以屏幕左上角为原点建立直角坐标系。第四象限为手机屏幕，Y轴越往下坐标值越大（注意跟数学象限的区别）。

2. 假设A点为touchstart事件触摸点，坐标为A(ax,ay)，然后手指向上滑动到点B(bx,by)，就满足条件by < ay;

3. 同理，向右滑动到C(cx,cy),满足cx > ax；向下滑动到D(dx,dy),满足dy > ay；向左移动到E(ex，ey)满足ex < ax.

4. 计算线段AB在Y轴上投影长度为m,在X轴上的投影长度为n

5. 计算r = m/n,如果r > 1,视为向上滑动。

6. 同理计算线段AC,AD,AE在Y轴投影长度与X轴的投影长度之比，得出向右向下向左的滑动。

参考引用资料：柯善强的随思笔记（欢迎关注这个公号）

欢迎关注公众号（hongji8410）和加入QQ群一起交流（522342554）