微信小程式之觸控事件(六)
微信小程式之入門篇(一)
微信小程式之註冊篇(二)
微信小程式之開發初體驗(三)——開發工具使用和目錄結構
微信小程式之生命週期(四)
微信小程式之資料繫結(五)
微信小程式之觸控事件(六)
微信小程式之基礎元件篇——檢視容器(七)
微信小程式之基礎元件篇——基礎內容(八)
微信小程式之基礎元件篇——表單元件(九)
微信小程式之基礎元件篇——導航元件(十)
微信小程式之基礎元件篇——媒體元件(十一)
微信小程式之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
})
}
})
相關文章
- 微信小程式避免按鈕重複觸發事件微信小程式事件
- 觸控事件事件
- JS觸控事件JS事件
- 觸控事件02事件
- 微信小遊戲開發(4)-動畫和觸控事件遊戲開發動畫事件
- 微信小程式事件繫結微信小程式事件
- 微信小程式-檢視事件微信小程式事件
- 微信小程式自定義事件微信小程式事件
- ScrollView 觸控事件View事件
- 通過程式碼控制View的觸控事件被觸發View事件
- 入門微信小程式[第六篇]微信小程式 -- 大櫻桃的安排微信小程式
- 微信小程式之支付微信小程式
- JS實現監控微信小程式JS微信小程式
- 微信小程式函式呼叫監控微信小程式函式
- 淺析觸手可及的微信小程式微信小程式
- Flutter:如何響應觸控事件Flutter事件
- 觸控事件獲取座標事件
- 微信小程式開發系列六:微信框架API的呼叫微信小程式框架API
- Android觸控事件(上)——事件的由來Android事件
- Android觸控事件(下)——事件的分發Android事件
- 微信小程式如何在事件中傳參微信小程式事件
- 微信小程式錯誤監控方法談微信小程式
- Android觸控事件的應用Android事件
- 安卓觸控事件與單擊事件的區別安卓事件
- Android觸控事件(續)——點選長按事件Android事件
- iOS開發學習之觸控事件和手勢識別iOS事件
- 微信小程式之小白教程系列 第二篇 微信小程式 -- 入口微信小程式
- 微信小程式之:小程式接入高德地圖SDK微信小程式地圖
- 微信小程式之-NBA線上直播小程式開發微信小程式
- 小程式如何避免多次點選,重複觸發事件事件
- 微信小程式之『自定義toast』微信小程式AST
- Android觸控事件傳遞機制Android事件
- 【透鏡系列】看穿 > 觸控事件分發 >事件
- iOS學習筆記05 觸控事件iOS筆記事件
- Android中TouchEvent觸控事件機制Android事件
- Android 觸控事件處理機制Android事件
- 微信小程式開發系列五:微信小程式中如何響應使用者輸入事件微信小程式事件
- 微信小程式之提高應用速度小技巧微信小程式