DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery mobile的觸控點擊事件會多次觸發問題的解決方法
jquery mobile的觸控點擊事件會多次觸發問題的解決方法
編輯:JQuery特效代碼     

jquery mobile 對手勢觸控提供了如下幾個事件監聽:
. 代碼如下:
tap  當用戶點屏幕時觸發
taphold 當用戶點屏幕且保持觸摸超過1秒時觸發
swipe 當頁面被垂直或者水平拖動時觸發。這個事件有其相關聯的屬性,分別為scrollSupressionThreshold, durationThreshold, horizontalDistanceThreshold, and verticalDistanceThreshold
swipeleft 當頁面被拖動到左邊方向時觸發
swiperight 當頁面被拖動到右邊方向時觸發

但是 tap 事件在 windows8 觸控設備和 android 設備上測試,均有一次點擊多次觸發的現象。
經測試,tap 方法的響應時間明顯快於 onclick 事件,那麼我們可以用 click 事件來處理 tap 事件的相應。示例代碼參考如下:

但是 tap 事件在 windows8 觸控設備和 android 設備上測試,均有一次點擊多次觸發的現象。
經測試,tap 方法的響應時間明顯快於 onclick 事件,那麼我們可以用 click 事件來處理 tap 事件的相應。示例代碼參考如下:

. 代碼如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, user-scalable=0" />
 <title>jquery mobile 的 tap 事件多次觸發問題-志文工作室</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<style>
.article{height:10000px;text-align: center}
</style>
<body>
<div data-role='page'>
 <div data-role='header' data-theme='b' data-position='fixed'>
  <a href='http://www.jb51.net' data-icon='home' data-theme='d' data-iconpos='notext' data-transition='turn'>志文工作室</a>
  <h1 role='heading'>志文工作室</h1>
   <a href='#menu-panel' data-icon='bars' data-theme='d' data-iconpos='notext' data-shadow='false' data-iconshadow='false'>菜單</a>
 </div><!-- /header -->
  <div data-role='content'>
  <div id="article" class="article">
   <ol data-role="listview" data-inset="true">
   </ol>
  </div>
 </div>
</div>
<script>
 //輕點屏幕
 //$('div#article').on("tap",function(event){
 $('div#article').on("click",function(event){
  event.stopPropagation();
  console.log(111111);
  if(event.clientY < 80){
  //單擊了頁面上半部分,則向上滑動
   if(document.body.scrollTop<1) return;
   var scrollPosY = document.body.scrollTop - document.body.clientHeight + 100;
   $.mobile.silentScroll(scrollPosY);
  }else if(event.clientY > document.body.clientHeight - 80){
   var scrollPosY = document.body.scrollTop + document.body.clientHeight - 100;
   if(scrollPosY < document.body.scrollHeight){//頂部覆蓋的高度+可見高度<網頁體高度,則滾動一屏
    $.mobile.silentScroll(scrollPosY);
   }
  }
 });
 for(var i=1;i<200;i++){
  $('#article ol').append('<li>第 '+ i +' 行:志文工作室</li>');
 }
</script>
</body>
</html>

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

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved