hammer.js e preventDefault();

Question

js per supportare anche i gesti tattili. Sto insabbiando la mia testa per prevenire le azioni di default. quando imposto lo event.preventDefault o event.gesture.preventDefault() o applico il parametro {prevent_defaults: true } sul martello, si attiva solo l'azione predefinita sull'ancora. Come posso evitare ciò e/o cosa sto sbagliando ?!

snippet di codice;

function initializeNavigation() { 
    $("nav").hammer({prevent_defaults: true }).on("tap", "a", function(event) { 
     event.preventDefault(); 
     event.gesture.preventDefault(); 
     var target = $(this.hash); 
     scrollToTarget(target, 1200); 
     // if there is an open detailItem then close it. 
     if (detailItemOpen) { 
      $("div." + detailItemOpen).slideUp(); 
     } 
    }) 

    if (Modernizr.mq('only screen and (max-width: 767px)')) { 
     initializeMobileMenuAndSetButton(); 
    } 
} 

Answer 1

Penso che si può anche provare event.stopPropagation() e event.gesture.stopPropagation(). Ma sembra che Hammer dia questo metodo: event.gesture.stopDetect() per un caso simile.

fonte: https://github.com/hammerjs/hammer.js/wiki/Event-delegation-and-how-to-stopPropagation---preventDefaults

Answer 2

Considerando Hammer 2.0+ event.gesture non è più e degli eventi è, ma un semplice oggetto.

event.gesture.srcEvent non sarà l'evento appropriato per interrompere la propagazione, quindi non funzionerà.

Se si utilizza l'evento tap e si desidera impedire clic/tocchi sul documento, è possibile fare qualcosa di simile. Abbiamo bisogno di creare un gestore rubinetto globale che andrà a sostituire i metodi originali stopPropagation e preventDefault

function createHandler(event) { 
 
    return { 
 
    isHandled: false, 
 
    _shouldStopPropagation: false, 
 
    _shoulePreventDefault: false, 
 
    stopPropagation: event.stopPropagation.bind(event), 
 
    preventDefault: event.preventDefault.bind(event), 
 
    } 
 
} 
 

 

 
function handleEvent(handler, node) { 
 
    let clickHandler; 
 

 

 
    if (!handler.isHandled) { 
 
    handler.isHandled = true; 
 
    document.addEventListener('click', clickHandler = (event)=> { 
 
     if (handler._shouldStopPropagation) { 
 
     handler.stopPropagation(); 
 
     event.stopPropagation(); 
 
     } 
 
     
 
     if (handler._shoulePreventDefault) { 
 
     handler.preventDefault(); 
 
     event.preventDefault(); 
 
     } 
 
     document.removeEventListener('click', clickHandler, true); 
 
    }, true); 
 
    } 
 
} 
 

 

 
// Create a global tap Event so we can replace the original functions 
 
document.addEventListener('tap', (event)=> { 
 
    let handler = createHandler(event); 
 

 
    event.stopPropagation = function() { 
 
    handler._shouldStopPropagation = true; 
 
    handleEvent(handler); 
 
    }; 
 
    event.preventDefault = function() { 
 
    handler._shoulePreventDefault = true; 
 
    handleEvent(handler); 
 
    } 
 
}, true); 
 

 
// Now we can use it. 
 
document.addEventListener('tap', (event)=> { 
 
    /* If you want to prevent Default */ 
 
    event.preventDefault(); 
 

 
    /* If you want to stop propagation */ 
 
    event.stopPropagation(); 
 

 
    /* If you want to do both */ 
 
    event.preventDefault(); 
 
    event.stopPropagation(); 
 
});