Stop event propagation in Meteor

Question

I've hooked up some basic click events using Meteor's event maps.

How do I stop the event from propagating after being handled?

Meteor's docs state that

Right now, the event handlers are wired up with jQuery, and the event object you receive is a jQuery event object.

However, neither return false nor e.stopPropagation() seem to work.

Answer 1

Currently, stopPropagation works in a limited set of circumstances. For propagation to stop between two handlers, the handlers must be specified on different templates, and there has to be an intervening DOM node container between the inner and outer template. A fix is under development right now and will go into an upcoming release.

Can you post a gist of your code so I can make sure your particular case will be addresed?

As a workaround, you might try e.stopImmediatePropagation(), which is supplied by jQuery and should keep any other handlers from running.

Answer 2

I ran across this question while researching this myself. The documentation for Blaze Event Maps is here.

For this problem in meteor you need to consider 2 functions depending upon what you want:

stopPropagation()

Prevent the event from propagating (bubbling) up to other elements. Other event handlers matching the same element are still fired, in this and other event maps.

stopImmediatePropagation()

Prevent all additional event handlers from being run on this event, including other handlers in this event map, handlers reached by bubbling, and handlers in other event maps.

What I wanted was to stop bubbling and stop propagating to other Meteor event handlers. So event.stopImmediatePropagation() did the trick and it is not really a workaround as advised above.