jquery mobile的触控点击事件会多次触发问题的解决方法
时间：2021-07-16 10:42:49|栏目：jquery|点击： 次
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://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 处理。
上一篇：jquery插件格式实例分析
栏 目：jquery
下一篇：jQuery侧边栏实现代码
本文标题：jquery mobile的触控点击事件会多次触发问题的解决方法
本文地址：http://www.codeinn.net/misctech/157960.html
