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