hammer.js und preventDefault();

Question

js, um auch Touch-Gesten zu unterstützen. Ich mache mir Sorgen um Standardaktionen. Wenn ich event.preventDefault oder event.gesture.preventDefault() einstelle oder sogar den Parameter {prevent_defaults: true } auf den Hammer trage, wird nur eine Standardaktion auf den Anker ausgelöst. Wie kann ich das verhindern und/oder was mache ich falsch ?!

Code-Schnipsel;

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

Ich glaube, Sie auch event.stopPropagation() und event.gesture.stopPropagation() versuchen. Aber es scheint, dass Hammer diese Methode gibt: event.gesture.stopDetect() für einen ähnlichen Fall.

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

Answer 2

Anbetracht Hammer 2.0+ event.gesture ist nicht mehr und Ereignis, sondern ein einfaches Objekt.

event.gesture.srcEvent wird nicht das richtige Ereignis sein, um StopPropagation auf, so wird es nicht funktionieren.

Wenn Sie das Ereignis tap verwenden und ein Klicken/Tippen auf das Dokument verhindern möchten, können Sie so etwas tun. Wir brauchen einen globalen Tap-Handler erstellen, die die ursprünglichen Methoden stopPropagation und 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(); 
 
});