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 相关文章推荐
推荐:极酷右键菜单
Nov 29 Javascript
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
Jan 30 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
javascript生成随机数的方法
May 16 Javascript
JSON+HTML实现国家省市联动选择效果
May 18 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 Javascript
学习JavaScript设计模式之状态模式
Jan 08 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
JS实现的点击表头排序功能示例
Mar 27 Javascript
node中间层实现文件上传功能
Jun 11 Javascript
JavaScript页面倒计时功能完整示例
May 15 Javascript
vue实现列表滚动的过渡动画
Jun 29 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
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
基于jQuery的js分页代码
2010/06/10 Javascript
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
jQuery实现可用于博客的动态滑动菜单
2015/03/09 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
nodejs判断文件、文件夹是否存在及删除的方法
2017/11/10 NodeJs
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
深入理解NodeJS 多进程和集群
2018/10/17 NodeJs
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
深入了解query和params的使用区别
2019/06/24 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
Python字符串的修改方法实例
2019/12/19 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
利用CSS3的transition属性实现滑动效果
2015/08/05 HTML / CSS
什么是组件架构
2016/05/15 面试题
毕业生个人求职信范文分享
2014/01/05 职场文书
培训班主持词
2014/03/28 职场文书
毕业寄语大全
2014/04/09 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
搞笑的获奖感言
2014/08/16 职场文书
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL