微信小程式之觸控事件（六）

weixin_33670713發表於2017-02-21
原文網址 : https://blog.csdn.net/weixin_33670713/article/details/87046637
微信小程式事件

微信小程式之入門篇（一）
微信小程式之註冊篇（二）
微信小程式之開發初體驗（三）——開發工具使用和目錄結構
微信小程式之生命週期（四）
微信小程式之資料繫結（五）
微信小程式之觸控事件（六）
微信小程式之基礎元件篇——檢視容器（七）
微信小程式之基礎元件篇——基礎內容（八）
微信小程式之基礎元件篇——表單元件（九）
微信小程式之基礎元件篇——導航元件（十）
微信小程式之基礎元件篇——媒體元件（十一）
微信小程式之API篇——豆瓣圖書搜尋（十二）
微信小程式之擴充篇——weui-wxss（十三）

什麼是事件

  • 事件是檢視層到邏輯層的通訊方式。
  • 事件可以將使用者的行為反饋到邏輯層進行處理。
  • 事件可以繫結在元件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函式。
  • 事件物件可以攜帶額外資訊，如 id， dataset， touches。

事件分類

事件分為冒泡事件和非冒泡事件：

  • 冒泡事件：當一個元件上的事件被觸發後，該事件會向父節點傳遞。
  • 非冒泡事件：當一個元件上的事件被觸發後，該事件不會向父節點傳遞。

WXML的冒泡事件列表：

型別 觸發條件
touchstart 手指觸控動作開始
touchmove 手指觸控後移動
touchcancel 手指觸控動作被打斷，如來電提醒，彈窗
touchend 手指觸控動作結束
tap 手指觸控後馬上離開
longtap 手指觸控後，超過350ms再離開

注：除上表之外的其他元件自定義事件如無特殊申明都是非冒泡事件，如<form/>
的submit事件，<input/>的input事件，<scroll-view/>的scroll事件，(詳見各個元件)

事件繫結

事件繫結的寫法同元件的屬性，以 key、value 的形式。

  • key 以bind或catch開頭，然後跟上事件的型別，如bindtap, catchtouchstart
  • value 是一個字串，需要在對應的 Page 中定義同名的函式。不然當觸發事件的時候會報錯。

注：bind事件繫結不會阻止冒泡事件向上冒泡，catch事件繫結可以阻止冒泡事件向上冒泡。

在編寫程式碼中，使用頻率高的事件方式是

  • 單擊——tap
  • 長按——longtap
  • 滑動——touchstart、touchmove、touchend、touchcancel

細心的讀者可能會發現，點選事件中，還有一個很重要的事件——雙擊，小程式竟然沒有實現，真是神奇。不過可以通過單擊事件模擬雙擊時間實現。查閱資料發現，電腦或者手機的雙擊事件都是300ms內連續點選，所以本文也採用300ms以內連續點選視為雙擊事件。

<!--index.wxml-->
<view>
    <button bindtap="binddoubletap">點選</button>
</view>

//index.js
Page({
  data: {
    //上一次點選的時間
    lastTapTime:0
  },
  binddoubletap:function(e){
    //獲取點選當前時間
    var curTime = e.timeStamp
    //上一次點選的時間
    var lastTime = this.data.lastTapTime
    if(lastTime > 0){
       //電腦雙擊事件間隔為300ms以內，這裡也用300ms間隔吧
      if(curTime - lastTime <300){
        console.log("雙擊事件觸發")
      }else{
        console.log("單擊事件觸發")
      }
    }else{
      console.log("單擊事件觸發")
    }
     //儲存本次點選的時間
    this.setData({
      lastTapTime: curTime
    })
  }
})

相關文章