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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
扩展jQuery 键盘事件的几个基本方法
Oct 30 Javascript
jQuery bind事件使用详解
May 05 Javascript
javascript常用对话框小集
Sep 13 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
Nov 26 Javascript
js实现可拖动DIV的方法
Dec 17 Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 Javascript
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
详解webpack模块化管理和打包工具
Apr 21 Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
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
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
php版微信js-sdk支付接口类用法示例
2016/10/12 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
让textarea自动调整大小的js代码
2011/04/12 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
vuejs如何配置less
2017/04/25 Javascript
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
Python群发邮件实例代码
2014/01/03 Python
Python set常用操作函数集锦
2017/11/15 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
澳大利亚在线购买儿童玩具:Toy Universe
2017/12/28 全球购物
职业生涯规划怎么写
2013/12/29 职场文书
护士自我鉴定总结
2014/03/24 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
英文演讲稿开场白
2014/08/25 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
隐形的翅膀观后感
2015/06/10 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
有关浪费资源的建议书
2015/09/14 职场文书