這篇文章主要介紹了jquery mobile的觸控點擊事件會多次觸發問題的解決方法以及替代方法,需要的朋友可以參考下
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" />
<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 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 處理。
更多信息請查看IT技術專欄
版權所有:易賢網
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試