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

前端技术 2023/09/06 JavaScript

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.phpstudy.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>

本文地址：https://www.stayed.cn/item/15361

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案