Detener jQuery Evento de deslizamiento móvil doble burbujeo

Question

Tengo jQuery Mobile en iPad Safari y, por alguna razón, los eventos de deslizamiento táctil se disparan dos veces.

Las personas han informado del mismo problema en el último año tan recientemente como esta semana, pero no puedo encontrar una explicación sobre cómo arreglar el evento doble sin modificar jQuery Mobile y no quiero hacer eso. Thread on jQuery forums

Los enlaces de elemento follwoing para el controlador de deslizamiento tienen todos el mismo resultado incorrecto de doble evento donde la alerta se llama dos veces por cada golpe.

¿Cómo deben vincularse los eventos jQuery Mobile touch para evitar el doble burbujeo?

// 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() era el truco, que es diferente de stopPropagation(). Asegurar que el método jQuery on() se llame en document.ready parece ayudar. Yo era capaz de utilizar cualquier selector de elementos para unir los eventos, incluyendo el uso de la swipeup y deslizar hacia abajo desde 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

que realmente ayudó en mi caso también. Estaba intentando pasar páginas con los eventos de jquery móvil y deslizar (izquierda y derecha) que se activan varias veces. event.stopImmediatePropagation() funcionó como un amuleto. Gracias !!

aquí está mi código.

<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

Bueno, tenía el mismo problema con el evento golpe dado en llamar dos veces. La solución consiste en unir el evento de este modo:

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