12

jquery mobileの「tap」イベントでテストしたところ、トリガーされるたびに2回発生することがわかりました。htmlページのコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>    
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.js"></script>      
    <style>
        #box{
            background-color:red;
            width:200px;
            height:200px;
        }   
    </style>
</head>
<body>
    <div id="box">
        tapped me
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#box').bind('tap',function(event) {
                alert('why');
            }); 
        });
    </script>
</body>
</html>

さらに皮肉なことに、これをjsfiddleでテストすると、イベントが1回だけ発生しました。

こちらがリンクです。 http://jsfiddle.net/mochatony/tzQ6D/6/

さらにテストした結果、JavaScriptをヘッダーセクションに配置することでバグが解消されたことがわかりました。

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
    </script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.js">
    </script>
    <style type="text/css">
        #box{ background-color:red; width:200px; height:200px; }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#box').bind('tap', function(event) {
                alert('halo');
            });
        });
    </script>        
</head>
<body>
    <div id="box">
        tapped me
    </div>
</body>
</html>

本文とヘッダーセクションの配置がこれを変える理由を説明できませんでした。

4

8 に答える 8

15

これを見た場所を忘れましたが、問題は、jQuery Mobileが「タップ」をシミュレートするためにタッチイベントとマウスイベントの両方にバインドしていることです。状況によっては、Androidが両方を起動します。

私のために働いたトリックはpreventDefault、イベントハンドラーでイベントを呼び出すことです。これにより、重複イベントが発生しなくなります。

これがたまにしか起こらない理由としては、モバイルブラウザは、誰かがタッチバージョンを聞いていない場合にのみ、マウスバージョンのイベントを起動しようとすることを知っています。そのヒューリスティックを混乱させる検出またはjQueryの委任に問題がある可能性があります。

于 2012-12-01T18:23:04.517 に答える
9

ゴーストクリックの問題が発生しています...これは既知の「バグ」であり、解決が困難です。

そこにもっと情報があります：

http://forum.jquery.com/topic/tap-fires-twice-with-live-tap https://developers.google.com/mobile/articles/fast_buttons http://philosopherdeveloper.wordpress.com/2011/ 11/01 / ghost-clicks-in-jquery-mobile /

最初のリンクには、そのトリックを実行するハックがあります。私の知る限り、簡単な解決策はありません:(

ところで：それがあなたの問題を解決しないとしても、@Sagivは正しいです。JQuery mobileは、ページの変更にajaxを使用することが多いため、document.readyイベントをトリガーしません。

于 2012-05-29T07:12:21.683 に答える
5

jQuery Mobile ページから:

重要: $(document).ready() ではなく $(document).bind('pageinit') を使用
してください jQuery で最初に学ぶことは、すべてが実行されるように $(document).ready() 関数内でコードを呼び出すことです。 DOM がロードされるとすぐに。ただし、jQuery Mobile では、ナビゲートするときに Ajax を使用して各ページのコンテンツを DOM にロードし、DOM Ready ハンドラーは最初のページに対してのみ実行されます。新しいページが読み込まれて作成されるたびにコードを実行するには、pageinit イベントにバインドします。このイベントについては、このページの下部で詳しく説明しています。

をスキップし$(document).ready()ます。詳細はこちら。

于 2012-05-29T06:42:20.030 に答える
2

この質問に関連して、私は2つのイベント「タップ」と「クリック」をもう一方の直後に取得していました。ここにあるすべてのアイデアは刺激的でしたが、最終的に別の解決策を見つけました。次のコードを JavaScript コントローラーに追加して、タイムスタンプに基づいて連続する重複イベントを識別しました。幸いなことに、2 つの重複イベントのタイムスタンプはまったく同じです。基本的に、イベントを消費することにした場合、最後に使用したタイムスタンプを保存します。2 回目に同じタイムスタンプを持つイベントを破棄しました。

var _lastEventTimestamp;
var checkAndPreventDuplicatedEvent = function (e) {
    if (e.timeStamp === _lastEventTimestamp) return true;
    else _lastEventTimestamp = e.timeStamp;
    return false;
}

次に、各ハンドラーで、最初に次のフィルタリング コードを追加しました。

var onTapSomething = function (e) {
   if (checkAndPreventDuplicatedEvent(e)) return;        
   //do here whatever you would do in the case of legitimate event...   
}

于 2015-02-04T18:35:42.170 に答える
0

私の場合、data-role="page"ページコンテナに追加すると、タップイベントが2回発生するのを防ぐことができました。

于 2012-12-18T16:57:56.403 に答える
0

これは最善の解決策ではない可能性があり、場合によっては機能しますが、クリックイベントが開始された直後に、その要素の CSS 'pointer-events' を 'none' に設定するとうまくいきました。次に、JS の setTimeout を使用して、500 ミリ秒後に「pointer-events」を auto にリセットします。

私にとっては、Android デバイスでは 300ms で十分でしたが、iPhone ではダブルクリックを防ぐために 500ms が必要でした。

function yourEvent(evt){

  $(el).css('pointer-events', 'none');
  
  setTimeout(function(){
      $(el).css('pointer-events', 'auto');
  }, 500);
  
  //do you stuff

}

于 2014-11-04T06:14:35.260 に答える
0

以前にこのようなことを経験しましたが、それは私のフォームがフォームの中になかったことが原因でしたdata-role="page"

私がお勧めするのは、コードを jQuery Mobile html 構造でラップして、代わりにこのように見えるようにすることです

<div data-role="page" class="ui-page ui-page-theme-a ui-page-active">
  <div class="ui-content">
    <div id="box">
        tapped me
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#box').bind('tap',function(event) {
                alert('why');
            }); 
        });
    </script>
   </div>
</div>
于 2014-04-07T19:24:12.823 に答える