Dừng sự kiện swipe trên thiết bị di động jQuery đôi bubbling

Question

Tôi có jQuery Mobile trên iPad Safari và vì một số lý do vuốt sự kiện chạm được kích hoạt hai lần.

Mọi người đã báo cáo cùng một vấn đề trong năm qua như tuần này nhưng tôi không thể tìm thấy giải thích về cách khắc phục sự kiện kép mà không sửa đổi jQuery Mobile và tôi không muốn làm điều đó. Thread on jQuery forums

Các liên kết phần tử follwoing cho trình xử lý vuốt đều có kết quả sự kiện kép không chính xác khi cảnh báo được gọi hai lần cho mỗi lần vuốt.

Sự kiện cảm ứng jQuery Mobile sẽ bị ràng buộc như thế nào để tránh bọt kép?

// 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() là lừa, đó là khác biệt so với stopPropagation(). Đảm bảo phương pháp jQuery on() được gọi trong document.ready dường như giúp đỡ. Tôi đã có thể sử dụng bất kỳ bộ chọn thành phần để ràng buộc các sự kiện bao gồm việc sử dụng swipeup và trượt xuống từ 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

nó thực sự giúp trong trường hợp của tôi quá. Tôi đã cố gắng để swipe các trang với jquery di động và các sự kiện swipe (trái và phải) đã được kích hoạt nhiều lần. event.stopImmediatePropagation() nó hoạt động như một sự quyến rũ. Cảm ơn bạn !!

đây là mã của tôi.

<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

Vâng, có cùng một vấn đề với sự kiện swipe được gọi là hai lần. Cách giải quyết là để ràng buộc sự kiện theo cách này:

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