hammer.js i preventDefault();

Question

js także do obsługi gestów dotykowych. Pakuję głowę, by zapobiec domyślnym działaniom. kiedy ustawiam event.preventDefault lub event.gesture.preventDefault() lub nawet zastosuję parametr {prevent_defaults: true } na młocie, to po prostu wywoła domyślną akcję na kotwicy. Jak mogę temu zapobiec i/lub co robię źle ?!

Fragment kodu;

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

myślę, że można także spróbować event.stopPropagation() i event.gesture.stopPropagation(). Ale wydaje się, że Hammer podaje tę metodę: event.gesture.stopDetect() dla podobnego przypadku.

źródło: https://github.com/hammerjs/hammer.js/wiki/Event-delegation-and-how-to-stopPropagation---preventDefaults

Answer 2

Zważywszy Hammer 2.0+ event.gesture już i zdarzeń jest jednak prosta obiektu.

event.gesture.srcEvent nie będzie odpowiednim wydarzeniem do zatrzymania Propagacji, więc nie zadziała.

Jeśli używasz zdarzenia tap i chcesz zapobiec klikaniu i dotykaniu dokumentu, możesz zrobić coś takiego. Musimy stworzyć globalną obsługi kranu, który zastąpi oryginalne metody stopPropagation i 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(); 
 
});