jQuery Mobileを使用してiPhoneのWebアプリケーションで最初のタブの後に複数のボタンタップを無視しますか？

Question

jQuery Mobileで構築されたHTML5 WebアプリケーションのボタンAを想定します。

誰かがボタンAをタップすると、foo（）が呼び出されます。

event.preventDefault（）を使ってみましたが、2番目のタップがfoo（）を呼び出すのを止めませんでした。 event.stopImmediatePropagation（）は動作するかもしれませんが、スタックの上にある他のメソッドも停止し、コードのメンテナンスをきれいにすることはできません。

その他のおすすめ？トラッキング変数を維持することは非常に醜い解決策のように思え、望ましくありません。

Answer 1

私はあなたが<a data-role="button">タイプのボタンを使用している場合、そこには「無効」状態はありませんが、あなたはそれを無効に外観を与えるために適切なクラスを追加することができ、ここでhttp://jsfiddle.net/kiliman/kH924/

をサンプルを作成しました。

イベントハンドラでは、ボタンにui-disabledクラスがあるかどうかを確認し、そうであればすぐに戻ることができます。そうでない場合は、ui-disabledクラスを追加してから、foo()

を呼び出します。ボタンを再度有効にするには、クラスを削除するだけです。

$(function() { 
    $('#page').bind('pageinit', function(e, data) { 
     // initialize page 
     $('#dofoo').click(function() { 
      var $btn = $(this), 
       isDisabled = $btn.hasClass('ui-disabled'); 
      if (isDisabled) { 
       e.preventDefault(); 
       return; 
      } 
      $btn.addClass('ui-disabled'); 
      foo(); 
     }); 
    }); 

    function foo() { 
     alert('I did foo'); 
    } 
}); 

Answer 2

あなたはフラグを設定し、それが再結合し、イベントハンドラ、その後foo()機能を実行したり、イベントをバインド解除は、ユーザーがそれを使用することができるようにしたくない時間とするOKだかどうかを確認することができます遅延の後（ちょうどカップルオプション）。

ここで私は何をしますか。しかし、3グーグルの時間と試行錯誤した後、これは御馳走を作品、

$(document).delegate('#my-page-id', 'pageinit', function() { 

    //setup a flag to determine if it's OK to run the event handler 
    var okFlag = true; 

    //bind event handler to the element in question for the `click` event 
    $('#my-button-id').bind('click', function() { 

     //check to see if the flag is set to `true`, do nothing if it's not 
     if (okFlag) { 

      //set the flag to `false` so the event handler will be disabled until the timeout resolves 
      okFlag = false; 

      //set a timeout to set the flag back to `true` which enables the event handler once again 
      //you can change the delay for the timeout to whatever you may need, note that units are in milliseconds 
      setTimeout(function() { 
       okFlag = true; 
      }, 300); 

      //and now, finally, run your original event handler 
      foo(); 
     } 
    }); 
});