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 相关文章推荐
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
包含中国城市的javascript对象实例
Aug 03 Javascript
JavaScript中的Object对象学习教程
May 20 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
Web 开发中Ajax的Session 超时处理方法
Jan 19 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
Apr 19 Javascript
又拍云 Node.js 实现文件上传、删除功能
Oct 28 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
Oct 11 Javascript
d3.js实现图形拖拽
Dec 19 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加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
JS实现监控微信小程序的原理
2018/06/15 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
2019/09/04 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
python中map()与zip()操作方法
2016/02/27 Python
python实现控制台打印的方法
2019/01/12 Python
创建Django项目图文实例详解
2019/06/06 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
python实现FTP循环上传文件
2020/03/20 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
Python join()函数原理及使用方法
2020/11/14 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
办公室主任岗位职责
2013/11/08 职场文书
团购业务员岗位职责
2014/03/15 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
2014年转正工作总结
2014/11/08 职场文书
单位推荐信范文
2015/03/27 职场文书
大学生干部培训心得体会
2016/01/06 职场文书