软件开发培训班 >> 编程开发 >> JavaScript


jquery mobile的触控点击事件会多次触发问题的解决方法

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 处理 。