;ol data-role="listview" data-inset="true">
ホームページ > 記事 > ウェブフロントエンド > jquery mobileのタッチクリックイベントが複数回トリガーされる問題の解決策_jquery
jquery mobileのタッチクリックイベントが複数回トリガーされる問題の解決策_jquery
- WBOYオリジナル
- 2016-05-16 16:49:261613ブラウズ
jquery mobile は、ジェスチャ タッチに対して次のイベント モニタリングを提供します:
コードをコピー コードは次のとおりです:
tap ユーザーが画面をタップするとトリガーされます
taphold ユーザーが画面をタップして 1 秒以上タッチし続けるとトリガーされます
swipe ページが垂直方向または水平方向にドラッグされたときにトリガーされます。このイベントには、scrollSupressionThreshold、durationThreshold、horizontalDistanceThreshold、verticalDistanceThreshold という関連付けられたプロパティがあります
swipeleft ページが左方向にドラッグされるとトリガーされます
swiperight ページが右方向にドラッグされるとトリガーされます
ただし、Windows 8 タッチ デバイスと Android デバイスでタップ イベントをテストしたところ、1 回のクリックで複数回トリガーされました。
テスト後、tap メソッドの応答時間は onclick イベントよりも大幅に高速であるため、click イベントを使用してタップ イベントの応答を処理できます。サンプルコードリファレンスは次のとおりです:
ただし、Windows 8 タッチ デバイスと Android デバイスでタップ イベントをテストしたところ、1 回のクリックで複数回トリガーされました。
テスト後、tap メソッドの応答時間は onclick イベントよりも大幅に高速であるため、click イベントを使用してタップ イベントの応答を処理できます。サンプルコードリファレンスは次のとおりです:
コードをコピー コードは次のとおりです:
Zhiwen Studio
Zhiwen Studio
メニュー
< ;/div>
<script><br> //画面をタップします<br> //$('div#article').on("tap",function(event){<br> $(' div#article' ).on("click",function(event){<br> events.stopPropagation();<br> console.log(111111);<br> if(event.clientY //ページの上部をクリックし、上にスライドします <br> if(document.body.scrollTop<1) return;<BR> varscrollPosY = document.body.scrollTop - document.body.clientHeight 100;<BR> $。 mobile.silentScroll(scrollPosY);<BR> }else if(event.clientY > document.body.clientHeight - 80){<br> varscrollPosY = document.body.scrollTop document.body.clientHeight - 100 ;<br> if(scrollPosY < document.body.scrollHeight){//トップ カバーの表示高さ <ウェブページ本文の高さの場合、1 画面スクロールします<BR> $.mobile.silentScroll(scrollPosY);<BR> } <BR> }<BR> });<BR> for(var i=1;i<200;i ){<BR> $('#article ol').append('<li>th ' i '行: Zhiwen Studio</li>');<br>}<br></script>
もう 1 つの代替方法:
Android デバイス上の JQueryMobile のタップ イベントは複数回トリガーされます。私たちの解決策は、Google FastButton を使用し、元々タップが必要だった場所を fastbutton で処理することです。
もう 1 つの代替メソッドのリファレンス:
Android デバイス上の JQueryMobile のタップ イベントには、Google FastButton を使用し、本来タップが必要な箇所に fastbutton を使用するという問題があります。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。