How to stop Propagation () w / Hammer.js 2.0?

Question

I have a parent and child div. Pan / Drag on the child should not affect the parent. This is a similar question , but was asked a year ago, and I am using a newer version of Hammer.js with jQuery shell.

My guess was that I would have to somehow stop Propagation (), but I'm not sure how to use it.

I made fun of a demo showing my problem in JsFiddle . I also commented on a couple of things that I tried.

$(".outer-box").hammer().bind("panright", function(event){ // do stuff when panning // panning here should move both boxes }); $(".outer-box").hammer().bind("panend", function(event){ // do stuff when panning ends }); $(".inner-box").hammer().bind("panright", function(event){ // do stuff when panning // panning here should only affect the inner box }); $(".inner-box").hammer().bind("panend", function(event){ // do stuff when panning ends }); 

Any suggestions or tips? Thanks!

Answer 1

Try event.srcEvent.stopPropagation() . A Hammer wraps around the object of a native event; srcEvent gives you access to the "normal" features of an event object.

Answer 2

In Hammer 2.0.6, like others, you can call event.srcEvent.stopPropagation() . One caveat, you should set domEvents=true as per the documentation.

Hammer can fire DOM events with the domEvents: true option. This will give your methods like stopPropagation (), so you can use event delegation. Hammer does not untie related events.

Code example

 var mc = new Hammer.Manager(elem); mc.options.domEvents=true; // enable dom events var pinch = new Hammer.Pinch(); mc.add(pinch); mc.get('pinch').set({ enable: true }); mc.on("pinch",function(e){e.srcEvent.stopPropagation();}); 

or

 var hammertime = new Hammer(elem); hammertime.domEvents = true; hammertime.on("panstart", function(e){e.srcEvent.stopPropagation();}); 

This method is listed on the document tips page, here http://hammerjs.imtqy.com/tips/

Answer 3

Unfortunately, stopPropagation() does not work. You need to check the purpose of your gesture to understand where the event came from.

For instance:

 $(parent_element).hammer().bind(gesture_type, function(event) { if (event.gesture.target.className === correctClass) doStuff(); }); 

Answer 4

I had the same problem, in particular, that the Hammer nested component was not properly stopping the distribution. In my case, I wanted to use a modal container (which was the parent component of the highest level, full screen with an opaque black background) to handle the click event, which closed the entire modal. Children's components contain content, and I wanted to cancel distribution with these children. In other words, the desired behavior: clicking inside the modal does nothing, but clicking outside the modality closes the modal.

This is further complicated by the react-hammerjs , which adds an extra layer of abstraction, including potential error reports that indicate the wrong event propagation.

No matter what I did, I could not get stopPropagation() to work. Even with options.domEvents set to true. I also tried falling into event.srcEvent.stopPropagation() (and options) without success.

I found that using stopImmediatePropagation() works as intended, regardless of the domEvents parameter. I understand that stopImmediatePropagation() may be more extreme, but I have no side effects. Click handlers inside child elements (e.g. buttons) still work fine, and I can cancel the modal file by clicking on the container.

Here is my last snippet that works great:

 const myComponent = (props) => ( <Hammer onTap={() => { ... cancel modal ... }} > <div className={'modal-container'} > <Hammer onTap={(e) => e.srcEvent.stopImmediatePropagation()}> <div className={'modal-content'}> ... modal content <Hammer onTap={() => { ... button handler ... }}> <button>Take Action</button> </Hammer> </div> </Hammer> </div> </Hammer> ) 

Answer 5

I had a similar situation in which I had two containers capable of scrolling to each other, and I only wanted the top to handle the event. For some reason, event.srcEvent.stopPropagation just didn't work.

As it turns out, there is a library that extends Hammer.js with an event propagation called propagating-hammerjs . I pulled this into my project, it fixed my problem.

Answer 6

It works:

 $(".outer-box").hammer({ preventDefault: true, domEvents: true }).on("panright", function() { }); 

Answer 7

If the same problem, however, was able to handle this by enabling domEvents.

 Hammer.defaults.domEvents = true; 

After enabling event.stopPropagation (); worked fine.