作者：xiaochun365，來(lái)自原文地址

一：?jiǎn)螕?、雙擊及長(zhǎng)按事件

事件綁定

事件綁定的寫法同組件的屬性，以 key、value 的形式。

• key 以bind或catch開(kāi)頭，然后跟上事件的類型，如bindtap, catchtouchstart
• value 是一個(gè)字符串，需要在對(duì)應(yīng)的 Page 中定義同名的函數(shù)。不然當(dāng)觸發(fā)事件的時(shí)候會(huì)報(bào)錯(cuò)。 bind事件綁定不會(huì)阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。

事件分類

• touchstart 手指觸摸
• • • • touchmove 手指觸摸后移動(dòng)
• • • touchcancel 手指觸摸動(dòng)作被打斷，如彈窗和來(lái)電提醒
• • touchend 手指觸摸動(dòng)作結(jié)束
• tap 手指觸摸后離開(kāi)
• longtap 手指觸摸后后，超過(guò)350ms離開(kāi)

單擊事件 
由touchstart、touchend組成,touchend后觸發(fā)tap事件。 
//wxml

1. <button bindtouchstart="clickStart" bindtouchend="clickEnd" bindtap="clickTap">單擊</button>

雙擊事件  由兩個(gè)單擊事件組成，兩次間隔時(shí)間小于300ms認(rèn)為是雙擊；微信官方文檔沒(méi)有雙擊事件，需要開(kāi)發(fā)者自己定義處理。  //wxml

1. <button data-time="{{lastTapTime}}" data-title="標(biāo)題" 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. })

長(zhǎng)按

1. <button type="primary" bindtouchstart="startClick" bindtouchend="endClick" bindlongtap="longClick" bindtap="holdClick">點(diǎn)住別撒手</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. })

//點(diǎn)擊view3

1. -view3 catchtap click

//點(diǎn)擊view2

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

//點(diǎn)擊view1

1. ---view1 catchtap click