微信小程序双击事件，事件冒泡,bangtap,catchtap事件绑定

作者：xiaochun365，来自原文地址

一：单击、双击及长按事件

事件绑定

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

• key 以bind或catch开头，然后跟上事件的类型，如bindtap, catchtouchstart
• value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。 bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

事件分类

• touchstart 手指触摸
• • • • touchmove 手指触摸后移动
• • • touchcancel 手指触摸动作被打断，如弹窗和来电提醒
• • touchend 手指触摸动作结束
• tap 手指触摸后离开
• longtap 手指触摸后后，超过350ms离开

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

1. <button bindtouchstart="clickStart" bindtouchend="clickEnd" bindtap="clickTap">单击</button>

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

1. <button data-time="{{lastTapTime}}" data-title="标题" bindtap="doubleClick">双击</button>

//js

1. Page({
2. data: {
3. lastTapTime: 0
4. },
5. doubleClick: function (e) {
6. var curTime = e.timeStamp
7. var lastTime = e.currentTarget.dataset.time
8. //var lastTime = this.data.lastTapTime
9. console.log(lastTime)
10. if (curTime - lastTime > 0) {
11. if (curTime - lastTime < 300) {
12. console.log("挺快的双击，用了：" + (curTime - lastTime))
13. }
14. }
15. this.setData({
16. lastTapTime: curTime
17. })
18. }
19. })

长按

1. <button type="primary" bindtouchstart="startClick" bindtouchend="endClick" bindlongtap="longClick" bindtap="holdClick">点住别撒手</button>

二：事件冒泡,bangtap,catchtap事件绑定

//wxml

1. <view class="view1" bindtap="view1">
2. <view class="view2" bindtap="view2">
3. <view class="view3" catchtap="view3"></view>
4. </view>
5. </view>

//js

1. Page({
2. data: {
3. }, view1: function () {
4. console.log("---view1 bindtap click")
5. }, view2: function () {
6. console.log("--view2 bindtap click")
7. }, view3: function () {
8. console.log("-view3 catchtap click ")
9. }
10. })

//点击view3

1. -view3 catchtap click

//点击view2

1. --view2 bindtap click
2. ---view1 bindtap click

//点击view1

1. ---view1 catchtap click