微信小程序 觸控事件詳細(xì)介紹
微信小程序 觸控事件:
微信小程序的"事件"挺有意思。看了說明文檔后發(fā)現(xiàn)它的功能很全,事件可以向父節(jié)點傳遞,而且打印這個事件的信息很透明,調(diào)試起來應(yīng)該非常方便。
接下來把文檔copy過來
原文地址:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html
》》》什么是事件
- 事件是視圖層到邏輯層的通訊方式。
- 事件可以將用戶的行為反饋到邏輯層進(jìn)行處理。
- 事件可以綁定在組件上,當(dāng)達(dá)到觸發(fā)事件,就會執(zhí)行邏輯層中對應(yīng)的事件處理函數(shù)。
- 事件對象可以攜帶額外信息,如id, dataset, touches。
事件的使用方式
在組件中綁定一個事件處理函數(shù)。
如bindtap,當(dāng)用戶點擊該組件的時候會在該頁面對應(yīng)的Page中找到相應(yīng)的事件處理函數(shù)。
<view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view>
在相應(yīng)的Page定義中寫上相應(yīng)的事件處理函數(shù),參數(shù)是event。
Page({ tapName: function(event) { console.log(event) } })
可以看到log出來的信息大致如下:
{ "type": "tap", "timeStamp": 1252, "target": { "id": "tapTest", "offsetLeft": 0, "offsetTop": 0, "dataset": { "hi": "MINA" } }, "currentTarget": { "id": "tapTest", "offsetLeft": 0, "offsetTop": 0, "dataset": { "hi": "MINA" } }, "touches": [{ "pageX": 30, "pageY": 12, "clientX": 30, "clientY": 12, "screenX": 112, "screenY": 151 }], "detail": { "x": 30, "y": 12 } }
事件詳解
事件分類
事件分為冒泡事件和非冒泡事件:
冒泡事件:當(dāng)一個組件上的事件被觸發(fā)后,該事件會向父節(jié)點傳遞。
非冒泡事件:當(dāng)一個組件上的事件被觸發(fā)后,該事件不會向父節(jié)點傳遞。
》》》事件分類
- touchstart 手指觸摸
- touchmove 手指觸摸后移動
- touchcancel 手指觸摸動作被打斷,如彈窗和來電提醒
- touchend 手指觸摸動作結(jié)束
- tap 手指觸摸后離開
- longtap 手指觸摸后后,超過350ms離開
》》》事件綁定
事件綁定的寫法同組件的屬性,以 key、value 的形式。
- key 以bind或catch開頭,然后跟上事件的類型,如bindtap, catchtouchstart
- value 是一個字符串,需要在對應(yīng)的 Page 中定義同名的函數(shù)。不然當(dāng)觸發(fā)事件的時候會報錯。 bind事件綁定不會阻止冒泡事件向上冒泡,catch事件綁定可以阻止冒泡事件向上冒泡。
上面簡單介紹了小程序事件基礎(chǔ),是時候彰顯"事件"的威力:
- 單擊(tap)
- 雙擊(dbtap)
- 長按(longtap)
- 滑動
- 多點觸控
1.單擊
單擊事件由touchstart、touchend組成,touchend后觸發(fā)tap事件。
<view> <button type="primary" bindtouchstart="mytouchstart" bindtouchend="mytouchend" bindtap="mytap">點我吧</button> </view> mytouchstart: function(e){ console.log(e.timeStamp + '- touch start') },mytouchend: function(e){ console.log(e.timeStamp + '- touch end') },mytap: function(e){ console.log(e.timeStamp + '- tap') }
2.雙擊
雙擊事件由兩個單擊事件組成,兩次間隔時間小于300ms認(rèn)為是雙擊;微信官方文檔沒有雙擊事件,需要開發(fā)者自己定義處理。
<view> <button type="primary" bindtap="mytap">點我吧</button> </view>
3.長按
長按事件手指觸摸后,超過350ms再離開。
<view> <button type="primary" bindtouchstart="mytouchstart" bindlongtap="mylongtap" bindtouchend="mytouchend" bindtap="mytap">點我吧</button> </view> mytouchstart: function(e){ console.log(e.timeStamp + '- touch start') },//長按事件mylongtap: function(e){ console.log(e.timeStamp + '- long tap') },mytouchend: function(e){ console.log(e.timeStamp + '- touch end') },mytap: function(e){ console.log(e.timeStamp + '- tap') }
單擊、雙擊、長按屬于點觸事件,會觸發(fā)touchstart、touchend、tap事件,touchcancel事件只能在真機(jī)模擬,不多說了。
事件 | 觸發(fā)順序 |
---|---|
單擊 | touchstart → touchend → tap |
雙擊 | touchstart → touchend → tap → touchstart → touchend → tap |
長按 | touchstart → longtap → touchend → tap |
4.滑動
手指觸摸屏幕并移動,為了簡化起見,下面以水平滑動和垂直滑動為例。 滑動事件由touchstart、touchmove、touchend組成
坐標(biāo)圖:
- 以屏幕左上角為原點建立直角坐標(biāo)系。第四象限為手機(jī)屏幕,Y軸越往下坐標(biāo)值越大(注意跟數(shù)學(xué)象限的區(qū)別)。
- 假設(shè)A點為touchstart事件觸摸點,坐標(biāo)為A(ax,ay),然后手指向上滑動到點B(bx,by),就滿足條件by < ay;
- 同理,向右滑動到C(cx,cy),滿足cx > ax;向下滑動到D(dx,dy),滿足dy > ay;向左移動到E(ex,ey)滿足ex < ax.
- 計算線段AB在Y軸上投影長度為m,在X軸上的投影長度為n
- 計算r = m/n,如果r > 1,視為向上滑動。
- 同理計算線段AC,AD,AE在Y軸投影長度與X軸的投影長度之比,得出向右向下向左的滑動。
以上沒考慮r為1的情況。
<view> <button type="primary" bindtouchstart="mytouchstart" bindtouchmove="mytouchmove">點我吧</button> </view>
5.多點觸控
由于模擬器尚不支持多點觸控,內(nèi)測開放后,繼續(xù)補(bǔ)充。
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關(guān)文章
總結(jié)JavaScript中BigIn函數(shù)常見的屬性
本文基于JavaScript基礎(chǔ),介紹了 BigInt 函數(shù),常見的屬性,通過 BigInt 函數(shù)進(jìn)行數(shù)字運(yùn)算符的比較。布爾運(yùn)算等等,通過按案例的分析進(jìn)行詳細(xì)的講解,需要的朋友可以參考一下2021-10-10js前端實現(xiàn)word?excel?pdf?ppt?mp4圖片文本等文件預(yù)覽
這篇文章主要為大家介紹了js前端實現(xiàn)word?excel?pdf?ppt?mp4圖片文本等文件預(yù)覽示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07JavaScript設(shè)計模式之單例模式應(yīng)用場景案例詳解
這篇文章主要為大家介紹了JavaScript中單例模式的應(yīng)用場景案例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05讓chatGPT教你如何使用taro創(chuàng)建mbox
這篇文章主要為大家介紹了讓chatGPT教你如何使用taro創(chuàng)建mbox實現(xiàn)實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03JS屬性scrollTop?clientHeight?scrollHeight理解學(xué)習(xí)
這篇文章主要為大家介紹了JS屬性scrollTop?clientHeight?scrollHeight理解學(xué)習(xí),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07umi插件開發(fā)仿dumi項目實現(xiàn)基礎(chǔ)路由解析
這篇文章主要為大家介紹了umi插件開發(fā)仿dumi項目實現(xiàn)基礎(chǔ)路由解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01