Come fermarePropagation() con Hammer.js 2.0?

Question

Ho un div genitore e figlio. Panning/trascinamento sul bambino non dovrebbe influenzare il genitore. This is a similar question ma è stato chiesto un anno fa, e sto usando una versione più recente di Hammer.js con il wrapper jQuery.

La mia ipotesi era che avrei dovuto in qualche modo fermarePropagation() ma non sono veramente sicuro di come usarlo.

Mi sono preso in giro a demo showing my problem on JsFiddle. Ho anche commentato le due cose che ho provato.

$(".outer-box").hammer().bind("panright", function(event){ 
    // do stuff when panning 
    // panning here should move both boxes 
}); 
$(".outer-box").hammer().bind("panend", function(event){ 
    // do stuff when panning ends 
}); 

$(".inner-box").hammer().bind("panright", function(event){ 
    // do stuff when panning 
    // panning here should only affect the inner box 
}); 
$(".inner-box").hammer().bind("panend", function(event){ 
    // do stuff when panning ends 
}); 

Eventuali suggerimenti o suggerimenti? Grazie!

Answer 1

Prova event.srcEvent.stopPropagation(). Hammer si avvolge attorno all'oggetto evento nativo; srcEvent ti dà accesso alle "solite" affordances dell'oggetto evento.

Answer 2

Sfortunatamente, stopPropagation() non funziona. È necessario verificare l'obiettivo del proprio gesto per capire da dove è stato attivato l'evento.

Ad esempio:

$(parent_element).hammer().bind(gesture_type, function(event) { 
    if (event.gesture.target.className === correctClass) 
     doStuff(); 
}); 

Answer 3

Ho avuto una situazione simile in cui avevo due contenitori magnetiche-grado uno sopra l'altro e volevamo solo quella superiore per gestire l'evento. Per qualche ragione, event.srcEvent.stopPropagation non funzionava.

Come risulta, esiste una libreria che estende Hammer.js con la propagazione di eventi chiamata propagating-hammerjs. Ho inserito questo nel mio progetto ha risolto il mio problema.

Answer 4

In Hammer 2.0.6, come altri hanno risposto, è possibile chiamare event.srcEvent.stopPropagation(). Un avvertimento, devi impostare domEvents=true come da documentazione.

Hammer è in grado di attivare eventi DOM con l'opzione domEvents: true. Questo darà i tuoi metodi come stopPropagation(), quindi puoi usare la delega degli eventi. Hammer non scioglierà gli eventi legati.

codice di esempio

var mc = new Hammer.Manager(elem); 
mc.options.domEvents=true; // enable dom events 
var pinch = new Hammer.Pinch(); 
mc.add(pinch); 
mc.get('pinch').set({ enable: true }); 
mc.on("pinch",function(e){e.srcEvent.stopPropagation();}); 

o

var hammertime = new Hammer(elem); 
hammertime.domEvents = true; 
hammertime.on("panstart", function(e){e.srcEvent.stopPropagation();}); 

Questa tecnica è elencato nella pagina punte dei documenti, qui http://hammerjs.github.io/tips/

Answer 5

che funziona:

$(".outer-box").hammer({ 
    preventDefault: true, 
    domEvents: true 
}).on("panright", function() { }); 

Answer 6

Aveva lo stesso problema, tuttavia era in grado di gestirlo abilitando domEvents.

Hammer.defaults.domEvents = true; 

Una volta abilitato, event.stopPropagation(); ha funzionato bene

Answer 7

Avevo lo stesso problema, in particolare che un componente Hammer annidato non interrompeva correttamente la propagazione. Nel mio caso, volevo un contenitore modale (che era il componente genitore di livello più alto, a schermo intero con uno sfondo nero opaco) per gestire un evento click che chiudeva l'intero modal.I componenti dei bambini contengono il contenuto e volevo annullare la propagazione con quei bambini. In altre parole, il comportamento desiderato è: un clic all'interno della modale non fa nulla, ma un clic all'esterno della modale chiude la modale.

Ciò è ulteriormente complicato dalla libreria react-hammerjs che aggiunge un ulteriore livello di astrazione, incluso potential bug reports che indica una propagazione non corretta degli eventi.

Non importa quello che ho fatto, non ho potuto ottenere stopPropagation() al lavoro. Anche con options.domEvents impostato su true. Ho anche provato a scavare nello event.srcEvent.stopPropagation() (e nelle varianti) senza successo.

Ho scoperto che l'utilizzo di stopImmediatePropagation() funziona come previsto, indipendentemente dall'impostazione domEvents. Capisco che stopImmediatePropagation() potrebbe essere più estremo, ma non ho effetti collaterali. I gestori dei clic all'interno dei bambini (come i pulsanti) funzionano ancora bene e posso annullare la modale facendo clic sul contenitore.

Ecco il mio frammento di finale che funziona bene:

const myComponent = (props) => (
    <Hammer onTap={() => { ... cancel modal ... }} > 
     <div className={'modal-container'} > 
     <Hammer onTap={(e) => e.srcEvent.stopImmediatePropagation()}> 
      <div className={'modal-content'}> 
       ... modal content 
       <Hammer onTap={() => { ... button handler ... }}> 
        <button>Take Action</button> 
       </Hammer> 
      </div> 
     </Hammer> 
     </div> 
    </Hammer> 
)