共计 2443 个字符,预计需要花费 7 分钟才能阅读完成。
jquery mobile 对手势触控提供了如下几个事件监听:
tap 当用户点屏幕时触发 | |
taphold 当用户点屏幕且保持触摸超过1秒时触发 | |
swipe 当页面被垂直或者水平拖动时触发。这个事件有其相关联的属性,分别为scrollSupressionThreshold, durationThreshold, horizontalDistanceThreshold, and verticalDistanceThreshold | |
swipeleft 当页面被拖动到左边方向时触发 | |
swiperight 当页面被拖动到右边方向时触发 |
但是 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='http://lzw.me' 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> |
示例参考: http://lzw.me/pages/demo/jquery_mobile_tap.html
另外一个替代方法参考:
JQueryMobile 在 Android 设备上的 tap 事件会出现多次触发的问题, 我们的解决方案是使用 Google FastButton,将原来需要用 tap 的地方改用 fastbutton 处理。
另外一个替代方法参考:
JQueryMobile 在 Android 设备上的 tap 事件会出现多次触发的问题, 我们的解决方案是使用 Google FastButton,将原来需要用 tap 的地方改用 fastbutton 处理。
正文完