首頁 >web前端 >js教程 >jquery mobile的觸控點擊事件會多次觸發問題的解決方法_jquery

jquery mobile的觸控點擊事件會多次觸發問題的解決方法_jquery

WBOY
WBOY原創
2016-05-16 16:49:261694瀏覽

jquery mobile 對手勢觸控提供以下幾個事件監聽:

複製程式碼 代碼如下:


代碼如下:



tap  當使用者點螢幕時觸發
taphold 當使用者點螢幕且保持觸控超過1秒時觸發
swipe 當頁面被垂直或水平拖曳時觸發。這個事件有其相關聯的屬性,分別為scrollSupressionThreshold, durationThreshold, horizo​​ntalDistanceThreshold, and verticalDistanceThresholdswipeleft 當頁面被拖曳到左邊方向時觸發

swiperight 當頁面拖曳到右邊方向當頁面被拖曳到右邊方向時被觸發

但是tap 事件在windows8 觸控裝置和android 裝置上測試,均有一次點擊多次觸發的現象。

經過測試,tap 方法的回應時間明顯快於 onclick 事件,那麼我們可以用 click 事件來處理 tap 事件的對應。範例程式碼參考如下:

但是 tap 事件在 windows8 觸控裝置和 android 裝置上測試,均有一次點擊多次觸發的現象。 經過測試,tap 方法的回應時間明顯快於 onclick 事件,那麼我們可以用 click 事件來處理 tap 事件的對應。範例程式碼參考如下:
複製代碼


代碼如下:








 
 
 jquery mobile 的tap 事件多次觸發問題-志文工作室
 
 
 




 

  志文工作室
  

志文工作室


   選單
 

  

  

   

       

  

 


<script><BR> //輕觸螢幕<BR> //$('div#article').on("tap",function(event){<BR> $( 'div#article').on("click",function(event){<BR>  event.stopPropagation();<BR>  console.log(111111);<BR>  if(event.cliclientY < 80){<<BR>  //點選了頁面上半部,則向上滑動<BR>   if(document.body.scrollTop<1) return;<BR>   var scrollPosY = document.body.scrollTop>   var scrollPosY = document.body.scrollTop - clidocument.body.p. 🎜>   $.mobile.silentScroll(scrollPosY);<BR>  }else if(event.clientY > document.body.clientHeight - 80){<BR> oo var scroll)Yoed documc [Trolled。 <BR>   if(scrollPosY < document.body.scrollHeight){//上方所覆蓋的高度可見高度<網頁體高度,則滾動一畫面<BR>    $.mobile.silentScroll(scrollPosY);< }<BR> });<BR> for(var i=1;i<200;i ){  $('#article ol').append('<li>第' i ' 行:志文工作室');<P> }</script>

另一個替代方法參考:
JQueryMobile 在 Android 裝置上的 tap 事件會出現多次觸發的問題, 我們的解決方案是使用 Google FastButton,將原來需要用 tap 的地方改用 fastbutton 處理。

另一個替代方法參考:
JQueryMobile 在Android 裝置上的tap 事件會出現多次觸發的問題, 我們的解決方案是使用Google FastButton,將原來需要用tap 的地方改用fastbutton處理。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn