2013-02-24 10 views
5

Sto creando un'applicazione iPad che è essenzialmente una serie di diapositive.Previene lo scorrimento degli eventi durante l'interazione con elementi in una pagina

Quando ho finito di leggere una diapositiva, sono in grado di scorrere alla diapositiva successiva * (usando il tocco di Zepto) che cambia il window.location alla diapositiva successiva. (l'evento di scorrimento è associato a window.body poiché deve funzionare su tutta la pagina) ...

Ecco il problema: alcune diapositive hanno elementi interattivi come pulsanti, elementi trascinabili ecc. Il problema è che l'evento di scorrimento viene attivato quando si utilizzano alcuni di questi elementi interattivi.

Qualcuno è a conoscenza di un modo per impedire lo scorrimento del trigger in questi casi? Forse le impostazioni di una sensibilità, ecc?

stumped ...

Auguri e grazie !!

+0

Credo che gli eventi di scorrimento siano generati dagli eventi a livello di documento. Se il tuo livello di elemento tocca * eventi chiama 'stopPropigation()', ciò dovrebbe impedire la generazione dell'evento di scorrimento. –

+0

Ciao amico scusami per essere fitto qui - potresti spiegarlo per un idiota (io!) :) Sto faticando a capire ... – Chris

risposta

2

Il modo Zepto gestisce gli eventi touch è si lega ascoltatori alle touchstart, touchend, e touchmove eventi in document.body. Esegue quindi calcoli su quale evento inviare e attiva un evento sull'elemento che ha ricevuto l'evento touchstart. Questo evento quindi esplode attraverso l'albero DOM evocando gli ascoltatori di ciascun elemento.

Questo ci dà due modi di prevenire eventi magnetiche:

In primo luogo, si potrebbe fare qualcosa di simile:

$('#my-child-element').bind('touchstart touchend touchup', function(event) { 
    event.stopPropagation(); 
}); 

Quando il vostro elemento figlio riceve un un evento di tocco, sarà evitare che si moltiplicazione elementi genitore, soprattutto l'etichetta del corpo. Ciò impedisce al processore touch Zepto di fare qualsiasi cosa, bloccando gli eventi swipe, tap, singleTap, longTap e doubleTap che si verificano durante il funzionamento in quell'elemento.

Poiché gli eventi magnetiche anche bolle, si potrebbe anche solo prevenire quegli eventi specifici dal spumeggiante al vostro elemento che ascolta cambio pagina fendenti:

$('#my-child-element').bind('swipeLeft swipeRight', function(event) { 
    event.stopPropagation(); 
}); 

Questo vi permetterà di ricevere ancora lo Zepto ha generato gli eventi all'interno della vostra elemento figlio ma non al di fuori Anche gli eventi di tocco di Zepto funzioneranno ancora per tutti gli elementi di tuo figlio.

Fiddle qui: http://jsfiddle.net/bnickel/dUuUd/

0

Speranza metodo "excludedElements" vi aiuterà, come qui di seguito.

$(".block").swipe({ 
    swipe: function (event, direction, distance, duration, fingerCount, fingerData) { 

    }, 
    excludedElements: ".link, a", 
    threshold: 0 
});