jquery mobileのタッチクリックイベントが複数回トリガーされる問題の解決策_jquery

WBOY
リリース: 2016-05-16 16:49:26
オリジナル
1667 人が閲覧しました

jquery mobile は、ジェスチャ タッチに対して次のイベント モニタリングを提供します:

コードをコピー コードは次のとおりです:

tap ユーザーが画面をタップするとトリガーされます
taphold ユーザーが画面をタップして 1 秒以上タッチし続けるとトリガーされます
swipe ページが垂直方向または水平方向にドラッグされたときにトリガーされます。このイベントには、scrollSupressionThreshold、durationThreshold、horizo​​ntalDistanceThreshold、verticalDistanceThreshold という関連付けられたプロパティがあります
swipeleft ページが左方向にドラッグされるとトリガーされます
swiperight ページが右方向にドラッグされるとトリガーされます

ただし、Windows 8 タッチ デバイスと Android デバイスでタップ イベントをテストしたところ、1 回のクリックで複数回トリガーされました。
テスト後、tap メソッドの応答時間は onclick イベントよりも大幅に高速であるため、click イベントを使用してタップ イベントの応答を処理できます。サンプルコードリファレンスは次のとおりです:

ただし、Windows 8 タッチ デバイスと Android デバイスでタップ イベントをテストしたところ、1 回のクリックで複数回トリガーされました。
テスト後、tap メソッドの応答時間は onclick イベントよりも大幅に高速であるため、click イベントを使用してタップ イベントの応答を処理できます。サンプルコードリファレンスは次のとおりです:

コードをコピー コードは次のとおりです:






jquery mobile のタップイベントが複数回トリガーされる - Zhiwen Studio








Zhiwen Studio

Zhiwen Studio


メニュー


;ol data-role="listview" data-inset="true">



< ;/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 を使用するという問題があります。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート