DDR爱好者之家

jquery mobile的触控点击事件会多次触发问题的解决方法
站长资源 2025/1/23 佚名
51 1538
DDR爱好者之家 Design By 杰米

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="/UploadFiles/2021-04-02/jquery-1.9.1.min.js"> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></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='https://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 处理。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米