在使用jQuery Mobile的iPhone webapp上的第一個按鈕之後忽略多個按鈕水龍頭？

Question

假設使用jQuery Mobile構建的HTML5 web應用程序中的按鈕A.

如果有人點擊按鈕A，我們調用foo（）。即使用戶雙擊按鈕A，Foo（）應該被調用一次。

我們嘗試使用event.preventDefault（），但沒有停止調用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()功能，或者取消綁定，你不希望用戶能夠使用它，然後在活動時間內重新綁定的事件處理程序延遲後（只是幾個選項）。

這是我會做的。我會用一個超時排除後續事件：

$(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(); 
     } 
    }); 
});