Prevent tap on parent element

[rgl]

How do we prevent the parent element from receiving the tap event, when we tap a child element?

I've tried to call event.preventDefault() and event.srcEvent.stopPropagation(), but none seem to work :-(

I've placed an example at: http://codepen.io/anon/pen/qDisl

[josdejong]

Yes, how to stop event propagation?

Here is my experiment: http://jsbin.com/xohasi/edit?html,output

See this related issue on stackoverflow: http://stackoverflow.com/questions/25530040/how-to-stop-hammer-js-event-propagation

[anitapillai]

You don't need to call preventDefault or stopPropagation. Neither of them will work. Instead in your parent container check what the event.target is. If it is not the parent container and is set to the child container then ignore the event.
In your eg make the following edit in the parent container listener:
if(event.target != containerEl){
return;
}
................................................................................
containerHammer.on("tap", function(event) {
if(event.target != containerEl){
return;
}
console.log("container tap");
});

[josdejong]

Yes, that's true, though having the parent to know about all it's childs (and the childs of its childs, etc) leads to highly coupled code. The nice thing about the browsers event delegation is that you can leave parent en childs independent of each other.

So the only alternative is to write our own event delegation solution :(

[gustavohenke]

+1, also looking for a viable solution.

I'm using a 3rd party lib that uses Hammer too, and its swipe events are triggered together with my own swipe/pan events in child elements. And I obviously won't be editing the source of a 3rd party lib.

[josdejong]

I just created a mixin to extend hammer.js with event propagation:

https://github.com/josdejong/propagating-hammerjs

Still working on a proper API. Right now you extend an instance like var hammer = propagating(new Hammer(elem)), but this won't solve the problem when using 3rd party libraries like the case of @gustavohenke. Maybe for that case we can override the hammer constructor globally with a custom one.

[kbullaughey]

I can confirm that propagating-hammerjs satisfies my requirements to control propagation. Any chance this could be rolled into hammerjs and enableable as a configuration option?

[runspired]

Closing this in favor of #807

[rimatla]

Guys, could you instruct me on what the implementation would look like the other way around?
- How to prevent an event on a child element?

I have a navigation bar that is invoked/shown in the app via a right swipe gesture.
My issue is that the swipe is currently registered anywhere on the screen, conflicting with a slide carousel, which is a child element, that I've implemented in one of the pages as well.

So I need to either find a way to:

• Isolate/prevent the hammer swipe gesture to be triggered within the slide carousel or
• Adjust the threshold of of the swipe to not be available everywhere on the screen, but limit it to a specific threshold, aka 'edge swipe'.

I'm using Hammer.JS - v2.0.8

`//detect hammer on all of the document
var swipe = new Hammer(document);
swipe.on('swiperight swipeleft', function (e) {
    e.preventDefault();
    //swipe right to open nav
    if (e.type == 'swiperight') {
        // open main menu
        $('#navigation-menu').animate({
            left: '0'
        });
        //swiping left should slide out nav and/or sub-nav(s)
    } else {
        // close/hide menu(s)
        $('#navigation-menu, #task-menu, #brief-menu').animate({
            left: '-100%'
        });
    }
});`