停止jQuery Mobile滑動事件雙冒泡

Question

我有jQuery Mobile的iPad Safari和由於某種原因觸摸滑動事件發射兩次。

在過去的一年中，人們已經報告了與本週最近相同的問題，但我無法找到如何解決這個雙重事件而不修改jQuery Mobile的解釋，我不想這樣做。 Thread on jQuery forums

滑動處理程序的follwoing元素綁定都具有相同的不正確的雙重事件結果，其中每次滑動都會調用兩次警報。

jQuery Mobile觸摸事件應該如何綁定以避免雙冒泡？

// Test 1: Binding directly to document with delegate() 
$(document).delegate(document, 'swipeleft swiperight', function (event) { 
    alert('You just ' + event.type + 'ed!'); 
}); 


// Test 2: Binding to document with on() handler recommended as of 1.7 with and without preventDefault 
$(document).on('swipeleft',function(event, data){ 
    event.preventDefault(); 
    alert('You just ' + event.type + 'ed!'); 
}); 


// Test 3: Binding to body with on() with and without event.stopPropagation 
$('body').on('swipeleft',function(event, data){ 
    event.stopPropagation(); 
    alert('You just ' + event.type + 'ed!'); 
}); 


// Test 4: Binding to div by class 
$('.container').on('swipeleft',function(event, data){ 
    event.stopPropagation(); 
    alert('You just ' + event.type + 'ed!'); 
}); 

Answer 1

event.stopImmediatePropagation()是特技，（），它是從不同stopPropagation。確保在document.ready中調用jQuery on()方法似乎有所幫助。我能夠使用任何元素選擇綁定的事件，包括使用swipeup和刷卡從here

$(document).ready(function(){  
    $(document).on('swipeleft swiperight swipedown swipeup',function(event, data){ 
     event.stopImmediatePropagation(); 
     console.log('(document).Stop prop: You just ' + event.type + 'ed!'); 
    }); 
}); 

Answer 2

倒在我的情況下，它確實也有幫助。我試圖用手機jquery和滑動事件（左側和右側）幾次觸發頁面。 event.stopImmediatePropagation（）它像一個魅力工作。謝謝 ！！

這是我的代碼。

<script type="text/javascript"> 
    $(document).bind('pageinit', function(event) { 
     $("div:jqmData(role='page')").live('swipeleft swiperight',function(event){ 
      if (event.type == 'swipeleft') { 
       var prev = $(this).prev("div:jqmData(role='page')"); 
       if(typeof(prev.data('url')) !='undefined') { 
        $.mobile.changePage(prev.data('url'), { transition: 'slide', reverse: false}); 
        event.stopImmediatePropagation(); 
       } 
      } 
      if (event.type == 'swiperight') { 
       var next = $(this).next("div:jqmData(role='page')"); 
       if(typeof(next.data('url')) != 'undefined') { 
        $.mobile.changePage(next.data('url'), { transition: 'slide', reverse: false}); 
        event.stopImmediatePropagation(); 
       }     
      }   
     }); 
    }); 
    </script> 

HTML -

<div data-role="page" id="page1" data-url="#page1"> 
    <div data-role="content"> 
     <div> 
     <h1> Page 1 </h1> 
     <p>I'm first in the source order so I'm shown as the page.</p>  
     <p>View internal page called</p>  
      <ul data-role="listview" data-inset="true" data-theme="c"> 
       <li>Swipe Right to view Page 2</li> 
      </ul> 
     </div> 
    </div> 
</div> 
<div data-role="page" id="page2" data-url="#page2"> 
    <div data-role="content"> 
     <div> 
     <h1> Page 2 </h1> 
     <p>I'm first in the source order so I'm shown as the page.</p>  
     <p>View internal page called</p>  
      <ul data-role="listview" data-inset="true" data-theme="c"> 
       <li>Swipe Right to view Page 3</li> 
      </ul> 
     </div> 
    </div> 
</div> 

Answer 3

好，曾與刷卡事件相同的問題被稱爲兩次。 的解決方法是將事件這樣綁定：

$(document).on('swipeleft', '#div_id', function(event){ 
    //console.log("swipleft"+event); 
    // code 
});