jquery mobile的觸控點(diǎn)擊事件會(huì)多次觸發(fā)問(wèn)題的解決方法
jquery mobile 對(duì)手勢(shì)觸控提供了如下幾個(gè)事件監(jiān)聽:
tap 當(dāng)用戶點(diǎn)屏幕時(shí)觸發(fā)
taphold 當(dāng)用戶點(diǎn)屏幕且保持觸摸超過(guò)1秒時(shí)觸發(fā)
swipe 當(dāng)頁(yè)面被垂直或者水平拖動(dòng)時(shí)觸發(fā)。這個(gè)事件有其相關(guān)聯(lián)的屬性,分別為scrollSupressionThreshold, durationThreshold, horizontalDistanceThreshold, and verticalDistanceThreshold
swipeleft 當(dāng)頁(yè)面被拖動(dòng)到左邊方向時(shí)觸發(fā)
swiperight 當(dāng)頁(yè)面被拖動(dòng)到右邊方向時(shí)觸發(fā)
但是 tap 事件在 windows8 觸控設(shè)備和 android 設(shè)備上測(cè)試,均有一次點(diǎn)擊多次觸發(fā)的現(xiàn)象。
經(jīng)測(cè)試,tap 方法的響應(yīng)時(shí)間明顯快于 onclick 事件,那么我們可以用 click 事件來(lái)處理 tap 事件的相應(yīng)。示例代碼參考如下:
但是 tap 事件在 windows8 觸控設(shè)備和 android 設(shè)備上測(cè)試,均有一次點(diǎn)擊多次觸發(fā)的現(xiàn)象。
經(jīng)測(cè)試,tap 方法的響應(yīng)時(shí)間明顯快于 onclick 事件,那么我們可以用 click 事件來(lái)處理 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ā)問(wèn)題-志文工作室</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>
//輕點(diǎn)屏幕
//$('div#article').on("tap",function(event){
$('div#article').on("click",function(event){
event.stopPropagation();
console.log(111111);
if(event.clientY < 80){
//單擊了頁(yè)面上半部分,則向上滑動(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)頁(yè)體高度,則滾動(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ā)的問(wèn)題, 我們的解決方案是使用 Google FastButton,將原來(lái)需要用 tap 的地方改用 fastbutton 處理。
另外一個(gè)替代方法參考:
JQueryMobile 在 Android 設(shè)備上的 tap 事件會(huì)出現(xiàn)多次觸發(fā)的問(wèn)題, 我們的解決方案是使用 Google FastButton,將原來(lái)需要用 tap 的地方改用 fastbutton 處理。
- JS檢測(cè)頁(yè)面中哪個(gè)HTML標(biāo)簽觸發(fā)點(diǎn)擊事件的方法
- 解決Js先觸發(fā)失去焦點(diǎn)事件再執(zhí)行點(diǎn)擊事件的問(wèn)題
- javascript觸發(fā)模擬鼠標(biāo)點(diǎn)擊事件
- jquery 觸發(fā)a鏈接點(diǎn)擊事件解決方案
- jQuery第一次運(yùn)行頁(yè)面默認(rèn)觸發(fā)點(diǎn)擊事件的實(shí)例
- jquery實(shí)現(xiàn)點(diǎn)擊label的同時(shí)觸發(fā)文本框點(diǎn)擊事件的方法
- 解決jQuery ajax動(dòng)態(tài)新增節(jié)點(diǎn)無(wú)法觸發(fā)點(diǎn)擊事件的問(wèn)題
- JQuery觸發(fā)事件例如click
- JQuery觸發(fā)radio或checkbox的change事件
- jQuery事件的綁定、觸發(fā)、及監(jiān)聽方法簡(jiǎn)單說(shuō)明
- javascript/jquery實(shí)現(xiàn)點(diǎn)擊觸發(fā)事件的方法分析
相關(guān)文章
jQuery對(duì)指定元素中指定字符串進(jìn)行替換的方法
這篇文章主要介紹了jQuery對(duì)指定元素中指定字符串進(jìn)行替換的方法,涉及jQuery針對(duì)字符串的匹配與替換的操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03利用jQuery實(shí)現(xiàn)一個(gè)簡(jiǎn)單的表格上下翻頁(yè)效果
這篇文章主要給大家介紹了利用jQuery實(shí)現(xiàn)一個(gè)簡(jiǎn)單的表格上下翻頁(yè)效果的相關(guān)資料,文中介紹的很詳細(xì),需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-03-03jquery 給動(dòng)態(tài)生成的標(biāo)簽綁定事件的幾種方法總結(jié)
下面小編就為大家分享一篇jquery 給動(dòng)態(tài)生成的標(biāo)簽綁定事件的幾種方法總結(jié),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02jQuery textarea的長(zhǎng)度進(jìn)行驗(yàn)證
Textarea 控件不能使用form validate.js 進(jìn)行判斷.2009-05-05解析jquery easyui tree異步加載子節(jié)點(diǎn)問(wèn)題
本篇文章主要介紹解析jquery easyui tree異步加載子節(jié)點(diǎn)問(wèn)題,easyui中的樹可以從標(biāo)記中建立,也可以通過(guò)指定一個(gè)URL屬性讀取數(shù)據(jù)建立,有興趣的可以了解一下。2017-03-03jQuery實(shí)現(xiàn)顏色打字機(jī)的完整代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)顏色打字機(jī)的完整代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03jQuery實(shí)現(xiàn)復(fù)選框批量選擇與反選的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)復(fù)選框批量選擇與反選的方法,主要通過(guò)jQuery的attr與removeAttr方法實(shí)現(xiàn)選擇與反選的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-06-06