Arrêter de jQuery Mobile de balayage d'événement de double bouillonnant

J'ai jQuery Mobile sur iPad Safari et pour une raison quelconque touche de balayage événements sont à tirer à deux reprises.

Personnes ont signalé le même problème au cours de la dernière année, comme l'a récemment cette semaine, mais je ne peux pas trouver une explication sur la manière de résoudre le double événement sans modification de jQuery Mobile et je ne veux pas le faire. Fil sur jQuery forums

La forme suivante de l'élément de fixation pour le balayage de gestionnaire ont tous le même incorrect double-événement de résultat où l'alerte est appelé deux fois pour chaque balayage.

Comment doit-jQuery Mobile tactile être liés afin d'éviter le double bouillonnement?

//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!');
});

OriginalL'auteur Dylan Valade | 2012-03-19

  1. 11

    de l'événement.stopImmediatePropagation() était le truc qui est différent de stopPropagation(). Assurer la jQuery() méthode est appelée dans le document.prêt semble aider. J'ai été en mesure d'utiliser n'importe quel élément sélecteur de lier les événements, y compris à l'aide de la swipeup et balayez vers le bas à partir de ici

    $(document).ready(function(){    
    $(document).on('swipeleft swiperight swipedown swipeup',function(event, data){
        event.stopImmediatePropagation();
        console.log('(document).Stop prop: You just ' + event.type + 'ed!');
    });
});
    Je l'ai placé sous $(document).bind('pageinit') et ça ne fonctionne pas. J'ai dû mettre event.stopImmediatePropagation(); dans chaque balayez vers le gestionnaire d'événement pour le faire fonctionner
    Qui fait sens. Votre balayez les événements sont tir deux fois et doivent être arrêtés avec stopImmediatePropagation() tout comme la réponse ci-dessus. Le pageinit l'événement n'est pas double bouillonnement de sorte qu'il ne nécessite pas de manuel d'arrêt. pageinit devrait déclencher une seule fois par page, mais il se déclenche à nouveau pour chaque ajoutées dynamiquement la page.
    Cela semble avoir fonctionné mieux que d'autres solutions, même si je suis encore obtenir quelques tordu comportement sur swiperight...mon Android 4.x va un peu de noix avec plusieurs (au hasard?) les pages avant qu'il ne tombe sur le bon.
    Heureux que c'était un pas dans la bonne direction. Le comportement étrange ne ressemble pas à un balayage d'événement de tir à deux reprises. Sans rien voir, ma première pensée est jQuery luttes pour calculer les dimensions de toutes les pages dans l'ordre au moment de l'animation de balayage qui se passe. Même si c'est en contradiction avec la conception sensible, j'ai eu une meilleure animation des résultats en ajoutant une fixe en hauteur et en largeur pour bloquer les éléments comme des images. Je pense que ça aide à l'animation de mathématiques.

    OriginalL'auteur Dylan Valade

  2. 3

    Bien, a eu le même problème avec swipe événement été appelé deux fois.
    La solution de contournement consiste à lier l'événement de cette façon:

    $(document).on('swipeleft', '#div_id',  function(event){
    //console.log("swipleft"+event);
    //code 
});
    Merci pour le partage. Je me demande si, à défaut de passer le conteneur en tant que paramètre appels on une fois sur n'importe quel conteneur qui obtient le lecteur et puis tout de suite à nouveau sur le document.
    hum peut-être le problème...ne sais pas exactement ce qui se passe. Mais il y a un problème lors de la fixation de tissu sur les niveaux de Document ci-dessous.
    Cela m'a aidé. En fait je viens de tester avec la liaison de document avec swipeleft et pas aussi swiperight, ce qui a conduit les deux événements à feu à deux reprises. Le moment où j'ai également changé pour swiperight deux événements a tiré une fois, comme prévu. (Et il n'y avait pas besoin pour l'événement.stopImmediatePropagation()).

    OriginalL'auteur Rodrigo Dias

  3. 0

    cela m'a vraiment aidé dans mon cas aussi. J'ai essayé de glisser des pages avec jquery mobile et faites glisser les événements( à gauche et à droite ) ont été déclenchement à plusieurs reprises. événement.stopImmediatePropagation() il a travaillé comme un charme. Merci!!!!!

    voici mon code. 

    <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>
    Vous êtes les bienvenus, je suis content que ça a aidé

    OriginalL'auteur Always 18