如何通過使用Jquery Mobile的Android上的點擊來防止出血？

Question

我有一個Jquery Mobile頁面。在我的標題中，我有一個按鈕來打開我的實際頁面上方的隱藏圖層。該圖層還包含一個標題和一個按鈕在同一地點。如果我顯示圖層並點擊按鈕，它會「流血」到下面的按鈕，同時觸發兩者。

不知道，如果HTML是任何幫助：

<div data-role="page" id="base" data-wrapper="true"> 
    <div data-role="header" data-theme="a"> 
     // first button 
     <div class="headWrapLeft ui-btn-left"> 
     <div data-role="controlgroup" > 
      <select data-iconpos="notext" data-icon="home"> 
       <option value="global">ALL</option> 
       <option value="local" selected="selected">SINGLE</option>   
       <option value="menu">Main Menu</option> 
      </select> 
     </div> 
     </div> 
     <h1>Header</h1>     
    </div> 
    <div data-role="content"> 
    // page content 
    </div> 


    <div data-role="panel" data-id="setup" data-panel="popover""> 

     <div data-role="page" data-show="first" id="main_setup"> 
     <div data-role="header" data-position="fixed" data-theme="a"> 
      // back button will be inserted here 
      <h1>Setup</h1> 
      </div> 
      ... 
     </div> 
    </div> 
</div>// end wrapper page 

的第一頁是我的基地頁。彈出式面板是一個覆蓋容器，它在智能手機上以全屏HTML頁面的形式打開。在平板電腦上一切正常，因爲面板打開時就像一個彈出式窗口，背景上的面板後面沒有任何按鈕。但是，在智能手機上，後臺按鈕位於背景頁面選擇的頂部。當我點擊後退按鈕時，選擇火災。

問：
你可以找到一些人要求在這裏和那裏如何防止通過Android上的點擊出血。我還沒有找到任何可行的解決方案。

我不知道這與事件冒泡或z指數做被忽略，所以：

我正在尋找任何想法如何確保，如果我點擊一個按鈕，這個按鈕並沒有其他任何得到點擊...任何想法如何實現這一點非常感謝！

感謝您的幫助！

編輯：
我想我知道什麼是錯的 - 看到在Android這個問題：
http://code.google.com/p/android/issues/detail?id=6721

思考什麼是最好的方法來解決，這是。我無法將背景頁面設置爲顯示：none或將其移出視圖，因爲疊加頁面是嵌套的。我也不想在疊加頁面可見時禁用所有的背景鏈接。

感謝您的更多想法！

Answer 1

好的。這是我如何做的。

當表示覆蓋酥料餅面板，我打電話此：

// Android-Bleeding-Click 
// http://code.google.com/p/android/issues/detail?id=6721 
var $popPanel = $('div:jqmData(id="setup")'); 

$('.ui-page').not($popPanel.find('.ui-page-active')) 
    .find(".ui-header") 
    .first() 
     .find(".ui-btn, input, select, textarea") 
     .addClass('ui-disabled androidStealsMyTime') 
     .attr('disabled','disabled') 

當隱藏覆蓋，我打電話此：上述

$('.androidStealsMyTime').removeClass('ui-disabled androidStealsMyTime') 
          .removeAttr('disabled'); 

爲JQM增強元件。如果是純輸入，則可以在輸入本身上禁用禁用，但由於JQM將一些元素添加爲子或兄弟元素，因此需要捕獲所有內容。這不是完美的...禁用=禁用a.link元素是語義上可疑的我猜，但然後agin，它適合於一條線，並工作。

Answer 2

從click()返回false應該防止它冒泡得更遠。

Answer 3

您不會顯示您如何綁定您的事件處理程序，因此我必須假設您對vclick事件具有約束力。如果是這種情況，那麼您將不得不手動丟棄獲得分派的第二個vclick事件。

vclick事件可以在某些設備上觸發兩次（即Android 2.1到2.3，但也有其他設備），並且如果點擊區域周圍的內容在這兩個事件觸發的時間之間變化，那麼您可以獲得觸發兩個事件處理程序。

這是當我想用vclick事件中，我使用fix：

//setup flag 
var vclick_ok = true; 

//delegate the event handling so any element added at any time with the correct class and tagName will trigger this event handler 
$(document).delegate('a.vclick', 'vclick', function() { 

    //check if it's OK to run the event handler 
    if (vclick_ok) { 

     //if it's OK to run, disable the next time this event handler runs until the setTimeout fires and resets the flag 
     vclick_ok = false; 
     setTimeout(function() { vclick_ok = true; }, 500); 
    } 
}); 

這樣的鏈接，只每半年一次，第二次按下，這應該是罰款打開對話框（因爲用戶不會希望能夠快速點擊按鈕）。