有時候我們需要在小程序中實現(xiàn)一個組件同時擁有單擊正勒、雙擊和長按三種操作得院，但是微信只提供了單擊和長按事件綁定，而且如果一個組件同時綁定了單擊雙擊事件章贞，在長按時祥绞，也會觸發(fā)單擊事件，所以這時候需要對程序做一些特別的處理鸭限。
演示demo可以在這里下載
要實現(xiàn)小程序的單擊和長按事件比較簡單蜕径，直接綁定微信提供的單擊和長按事件就可以了，但是要一個組件同時支持單擊和長按的操作败京，而這兩個事件又不沖突就需要做一些額外的工作了兜喻。因為微信提供的長按事件如果同時綁定了單擊事件，那么長按時也會觸發(fā)單擊事件赡麦。另外微信沒有提供雙擊事件朴皆，所以雙擊需要自己實現(xiàn)。
首先泛粹，需要在js中定義幾個變量
// 觸摸開始時間
touchStartTime: 0,
// 觸摸結(jié)束時間
touchEndTime: 0,
// 最后一次單擊事件點擊發(fā)生時間
lastTapTime: 0,
// 單擊事件點擊后要觸發(fā)的函數(shù)
lastTapTimeoutFunc: null,
然后定義兩個記錄觸摸事件的函數(shù)
/// 按鈕觸摸開始觸發(fā)的事件
touchStart: function(e) {
this.touchStartTime = e.timeStamp
},
/// 按鈕觸摸結(jié)束觸發(fā)的事件
touchEnd: function(e) {
this.touchEndTime = e.timeStamp
},
在界面中需要綁定點擊事件的地方遂铡，需要加入bindtouchstart 和bindtouchend,以便記錄下按鈕開始觸摸和結(jié)束觸摸的時間。其他的分別綁定好單擊晶姊、雙擊扒接、長按事件就好了。
<!--index.wxml-->
<view class="container">
<view class = "split"></view>
<view class = "btn" bindtap="tap" bindtouchstart="touchStart" bindtouchend="touchEnd">
單擊
</view>
<view class = "split"></view>
<view class = "btn" bindtap="doubleTap" bindtouchstart="touchStart" bindtouchend="touchEnd">
雙擊
</view>
<view class = "split"></view>
<view class = "btn" bindlongtap="longTap" bindtouchstart="touchStart" bindtouchend="touchEnd">
長按
</view>
<view class = "split"></view>
<view class = "btn" bindtap="multipleTap" bindlongtap="longTap" bindtouchstart="touchStart" bindtouchend="touchEnd">
單擊／雙擊／長按
</view>
</view>
僅有單擊不用做特殊的處理：
/// 單擊
tap: function(e) {
var that = this
wx.showModal({
title: '提示',
content: '單擊事件被觸發(fā)',
showCancel: false
})
},
雙擊和單擊并存時的實現(xiàn)们衙，這里實現(xiàn)雙擊和單擊是參考了手機點擊網(wǎng)頁的300ms延時的方式钾怔，原來在iPhone4出來的時候，手機網(wǎng)頁比較小蒙挑，所以iPhone瀏覽器上加入了雙擊放大網(wǎng)頁的操作宗侦，導(dǎo)致網(wǎng)頁的點擊需要延時300ms才會觸發(fā)，即300ms內(nèi)點擊兩次算雙擊事件忆蚀。這里實現(xiàn)是在單擊時矾利，將單擊事件延遲300ms執(zhí)行懊悯，如果300ms內(nèi)又有一次點擊，則把單擊事件取消梦皮，然后觸發(fā)單擊事件。
/// 雙擊
doubleTap: function(e) {
var that = this
// 控制點擊事件在350ms內(nèi)觸發(fā)桃焕，加這層判斷是為了防止長按時會觸發(fā)點擊事件
if (that.touchEndTime - that.touchStartTime < 350) {
// 當前點擊的時間
var currentTime = e.timeStamp
var lastTapTime = that.lastTapTime
// 更新最后一次點擊時間
that.lastTapTime = currentTime
// 如果兩次點擊時間在300毫秒內(nèi)剑肯，則認為是雙擊事件
if (currentTime - lastTapTime < 300) {
console.log("double tap")
// 成功觸發(fā)雙擊事件時，取消單擊事件的執(zhí)行
clearTimeout(that.lastTapTimeoutFunc);
wx.showModal({
title: '提示',
content: '雙擊事件被觸發(fā)',
showCancel: false
})
}
}
},
單擊观堂、雙擊和長按同時存在的實現(xiàn)：
/// 長按
longTap: function(e) {
console.log("long tap")
wx.showModal({
title: '提示',
content: '長按事件被觸發(fā)',
showCancel: false
})
},
/// 單擊让网、雙擊
multipleTap: function(e) {
var that = this
// 控制點擊事件在350ms內(nèi)觸發(fā)，加這層判斷是為了防止長按時會觸發(fā)點擊事件
if (that.touchEndTime - that.touchStartTime < 350) {
// 當前點擊的時間
var currentTime = e.timeStamp
var lastTapTime = that.lastTapTime
// 更新最后一次點擊時間
that.lastTapTime = currentTime
// 如果兩次點擊時間在300毫秒內(nèi)师痕，則認為是雙擊事件
if (currentTime - lastTapTime < 300) {
console.log("double tap")
// 成功觸發(fā)雙擊事件時溃睹，取消單擊事件的執(zhí)行
clearTimeout(that.lastTapTimeoutFunc);
wx.showModal({
title: '提示',
content: '雙擊事件被觸發(fā)',
showCancel: false
})
} else {
// 單擊事件延時300毫秒執(zhí)行，這和最初的瀏覽器的點擊300ms延時有點像胰坟。
that.lastTapTimeoutFunc = setTimeout(function () {
console.log("tap")
wx.showModal({
title: '提示',
content: '單擊事件被觸發(fā)',
showCancel: false
})
}, 300);
}
}
},
在實際應(yīng)用時可以靈活應(yīng)用因篇，多點擊事件可以組合操作，比如"單擊+雙擊"笔横，"單擊+長按"竞滓，"雙擊+長按"。在我們現(xiàn)在的小程序項目中是有一個地方用上了"單擊+雙擊+長按"的吹缔，單擊預(yù)覽圖片商佑，雙擊修改圖片類型，長按刪除圖片厢塘。
