微信開發入門（四）觸控事件

》》》什麼是事件

• #事件是視圖層到邏輯層的通訊方式。

• 事件可以將使用者的行為回饋到邏輯層進行處理。

• 事件可以綁定在元件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數。

• 事件物件可以攜帶額外訊息，如id, dataset, touches。

》》》事件分類

• touchstart 手指觸摸

• touchmove 手指觸摸後移動

• touchcancel 手指觸摸動作被打斷，如彈窗和來電提醒

• touchend 手指觸摸動作結束

• #tap 手指觸摸後離開

• longtap 手指觸摸後後，超過350ms離開

》》事件綁定

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

• key 以bind或catch開頭，然後跟上事件的類型，如bindtap, catchtouchstart

• value 是一個字串，需要在對應的Page 中定義同名的函數。不然觸發事件的時候會報錯。 bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。

上面簡單介紹了小程式事件基礎，是時候彰顯"事件"的威力：

• 點擊(tap)

• 雙擊(dbtap)

• 長按(longtap)

• 滑動

• ##多點觸控

1.點選

點選事件由touchstart、touchend組成,touchend後觸發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認為是雙擊；微信官方文件沒有雙擊事件，需要開發者自己定義處理。

<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')
}

點擊、雙擊、長按屬於點觸事件，會觸發touchstart、touchend、tap事件，touchcancel事件只能在真機模擬，不多說了。

事件觸發順序#點擊touchstart → touchend → tap雙擊touchstart → touchend → tap → touchstart → touchend → tap##長按4.滑動

touchstart → longtap → touchend → tap

手指觸摸螢幕並移動，為了簡化起見，下面以水平滑動和垂直滑動為例。 滑動事件由touchstart、touchmove、touchend組成

#座標圖： 

##############################################################################################以螢幕左上角為原點建立直角座標系。第四象限為手機螢幕，Y軸越往下座標值越大（注意跟數學象限的差異）。 ############假設A點為touchstart事件觸摸點，座標為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.多點觸控######由於模擬器尚不支援多點觸控，內測開放後，繼續補充。 ######【相關推薦】######1. ###微信公眾號平台源碼下載##########2. ###微信投票源碼####### ###3.### 微信啦啦外送2.2.4解密開源版微信魔術方塊原始碼######

以上是微信開發入門（四）觸控事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！