js to also support touch-gestures. I'm bagging my head about prevent default actions. when I set event.preventDefault or event.gesture.preventDefault() or even apply parameter {prevent_defaults: true } on hammer it just triggers default action on the anchor. How can I prevent that and/or what am I doing wrong?!

Code snippet;

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();
    }
}

js to also support touch-gestures. I'm bagging my head about prevent default actions. when I set event.preventDefault or event.gesture.preventDefault() or even apply parameter {prevent_defaults: true } on hammer it just triggers default action on the anchor. How can I prevent that and/or what am I doing wrong?!

Code snippet;

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();
    }
}

• javascript
• jquery
• events
• hammer.js

• Although not quite a duplicate, this answer may help: stackoverflow./questions/10714868/… – CodingIntrigue Commented Aug 14, 2013 at 6:56
• I don't get your answer because it also happens in Firefox. It has something to do with Hammer.js and the events. When I used just the click-events everything worked correct on devices with a mouse. – myradon Commented Aug 14, 2013 at 7:26
• True, long discussion about it here. It is about stopPropagation(), but applies to preventDefault() too: github./EightMedia/hammer.js/issues/237 – CodingIntrigue Commented Aug 14, 2013 at 7:38
• 3 Aha okay. I read the topic. So a tap isn't yhe same as a click-event. That's why still default behaviour, click on anchor, is still being triggered. I could use the opted solution. I bind a second on-method .on("click", funtion(event) { event.preventDefault()} – myradon Commented Aug 14, 2013 at 18:08
• Your last ment should be the accepted answer myradon ;) – Bart Burg Commented Mar 21, 2014 at 9:32

2 Answers 2

Considering Hammer 2.0+ event.gesture is no longer and Event, but a simple Object.

event.gesture.srcEvent will not be the proper event to stopPropagation on, so it will not work.

If you are using the tap event, and want to prevent click/taps on the document you can do something like this. We need to create a global tap handler that will replace the original methods stopPropagation and 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();
});

I think you can also try event.stopPropagation() and event.gesture.stopPropagation(). But it seems that Hammer gives that method : event.gesture.stopDetect() for a similar case.

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