這篇文章主要介紹了jquery mobile的觸控點擊事件會多次觸發(fā)問題的解決方法以及替代方法,需要的朋友可以參考下
jquery mobile 對手勢觸控提供了如下幾個事件監(jiān)聽:
代碼如下:
tap 當用戶點屏幕時觸發(fā)
taphold 當用戶點屏幕且保持觸摸超過1秒時觸發(fā)
swipe 當頁面被垂直或者水平拖動時觸發(fā)。這個事件有其相關(guān)聯(lián)的屬性，分別為scrollSupressionThreshold, durationThreshold, horizontalDistanceThreshold, and verticalDistanceThreshold
swipeleft 當頁面被拖動到左邊方向時觸發(fā)
swiperight 當頁面被拖動到右邊方向時觸發(fā)
但是 tap 事件在 windows8 觸控設(shè)備和 android 設(shè)備上測試，均有一次點擊多次觸發(fā)的現(xiàn)象。
經(jīng)測試，tap 方法的響應(yīng)時間明顯快于 onclick 事件，那么我們可以用 click 事件來處理 tap 事件的相應(yīng)。示例代碼參考如下：
但是 tap 事件在 windows8 觸控設(shè)備和 android 設(shè)備上測試，均有一次點擊多次觸發(fā)的現(xiàn)象。
經(jīng)測試，tap 方法的響應(yīng)時間明顯快于 onclick 事件，那么我們可以用 click 事件來處理 tap 事件的相應(yīng)。示例代碼參考如下：
代碼如下:
<!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 事件多次觸發(fā)問題-志文工作室</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){//頂部覆蓋的高度+可見高度<網(wǎng)頁體高度，則滾動一屏
$.mobile.silentScroll(scrollPosY);
}
}
});
for(var i=1;i<200;i++){
$('#article ol').append('<li>第 '+ i +' 行：志文工作室</li>');
}
</script>
</body>
</html>
另外一個替代方法參考：
JQueryMobile 在 Android 設(shè)備上的 tap 事件會出現(xiàn)多次觸發(fā)的問題, 我們的解決方案是使用 Google FastButton，將原來需要用 tap 的地方改用 fastbutton 處理。
另外一個替代方法參考：
JQueryMobile 在 Android 設(shè)備上的 tap 事件會出現(xiàn)多次觸發(fā)的問題, 我們的解決方案是使用 Google FastButton，將原來需要用 tap 的地方改用 fastbutton 處理。
更多信息請查看IT技術(shù)專欄
公眾號
事業(yè)單位
當前位置：
公考類
招聘類
各類考試