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


Posted in Javascript onMay 08, 2014

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='https://3water.com' 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 处理。

Javascript 相关文章推荐
javascript concat数组累加 示例
Sep 03 Javascript
Ext grid 添加右击菜单
Nov 26 Javascript
JQuery 将元素显示在屏幕的中央的代码
Feb 27 Javascript
一些实用的jQuery代码片段收集
Jul 12 Javascript
在javascript中对于DOM的加强
Apr 11 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
select下拉框插件jquery.editable-select详解
Jan 22 Javascript
javascript内存分配原理实例分析
Apr 10 Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 Javascript
js实现拖拽元素选择和删除
Aug 25 Javascript
javascript操作excel生成报表示例
May 08 #Javascript
jquery的ajax跨域请求原理和示例
May 08 #Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 #Javascript
javascript与有限状态机详解
May 08 #Javascript
ajax提交表单实现网页无刷新注册示例
May 08 #Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
May 08 #Javascript
js动态删除div元素基本思路及实现代码
May 08 #Javascript
You might like
PHP 读取和编写 XML
2014/11/19 PHP
js玩一玩WSH吧
2007/02/23 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
2010/03/23 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
小程序实现页面顶部选项卡效果
2018/11/06 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
EM算法的python实现的方法步骤
2018/01/02 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
Python代码需要缩进吗
2020/07/01 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
工程师自我评价怎么写
2013/09/19 职场文书
医学专业大学生求职信
2014/07/12 职场文书
毕业生银行实习自我鉴定
2014/10/14 职场文书
2014年学习部工作总结
2014/11/12 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
新课程改革心得体会
2016/01/22 职场文书
Go语言基础函数基本用法及示例详解
2021/11/17 Golang