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 href='http://www.dbjr.com.cn' 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 處理。
- JS檢測頁面中哪個HTML標簽觸發(fā)點擊事件的方法
- 解決Js先觸發(fā)失去焦點事件再執(zhí)行點擊事件的問題
- javascript觸發(fā)模擬鼠標點擊事件
- jquery 觸發(fā)a鏈接點擊事件解決方案
- jQuery第一次運行頁面默認觸發(fā)點擊事件的實例
- jquery實現(xiàn)點擊label的同時觸發(fā)文本框點擊事件的方法
- 解決jQuery ajax動態(tài)新增節(jié)點無法觸發(fā)點擊事件的問題
- JQuery觸發(fā)事件例如click
- JQuery觸發(fā)radio或checkbox的change事件
- jQuery事件的綁定、觸發(fā)、及監(jiān)聽方法簡單說明
- javascript/jquery實現(xiàn)點擊觸發(fā)事件的方法分析
相關(guān)文章
jquery 給動態(tài)生成的標簽綁定事件的幾種方法總結(jié)
下面小編就為大家分享一篇jquery 給動態(tài)生成的標簽綁定事件的幾種方法總結(jié),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02解析jquery easyui tree異步加載子節(jié)點問題
本篇文章主要介紹解析jquery easyui tree異步加載子節(jié)點問題,easyui中的樹可以從標記中建立,也可以通過指定一個URL屬性讀取數(shù)據(jù)建立,有興趣的可以了解一下。2017-03-03jQuery實現(xiàn)復(fù)選框批量選擇與反選的方法
這篇文章主要介紹了jQuery實現(xiàn)復(fù)選框批量選擇與反選的方法,主要通過jQuery的attr與removeAttr方法實現(xiàn)選擇與反選的功能,非常具有實用價值,需要的朋友可以參考下2015-06-06