有時候我們需要在小程序中實現(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é)束觸摸的時間。其他的分別綁定好單擊、雙擊、長按事件就好了。

  
  
    單擊
  


  
  
    雙擊
  


  
  
    長按
  


  
  
    單擊／雙擊／長按
  

僅有單擊不用做特殊的處理：

  /// 單擊
  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ù)覽圖片，雙擊修改圖片類型，長按刪除圖片。