Prevent action on parent view to be trigger by click on child view


I was wondering how one would prevent an action to be triggered if set on a parent view, when the user clicks on a child view. For instance, let’s assume the following application.hbs:

<div class="main" {{action 'someAction'}}>

The template for the current route looks like this:

<div class="foo"></div>

If the user clicks on the .foo element, the someAction is triggered. Depending on the situation I might not want this behavior. One solution would be to add a fake action with bubbling disabled on the .foo element:

<div class="foo" {{action null bubbles=false}}></div>

Works but doesn’t seem right. Is there a better way?

See this JSBin to check out the behavior:


You can create an IndexView and catch the click there. But I suppose the best way to approach this would be to think about if the main div that encapsulates all nested outlets really needs to fire an action that triggers on ‘click’.


Yeah of course, not having the click event on the main div would be the best way. But let’s assume you have multiple active containers in the application, e.g. a sidebar, which should be closed after clicking anywhere in the app. How would you accomplish this without a click event on the main div?


Is this really an issue when implementing a sidebar? Should be save to trigger the ‘main content clicked’ method and check in the action handler if the sidebar is open and only handle this when sidebar is open?!


True as well, but it’s not that easy in my case. We have multiple sections of the site that fall into this state. But only one of them can be open at any time. Now when you click into one of them the action bubbles up and the section that was clicked on gets closed - as it should be when clicking anywhere within the main view, but not when you click inside the actual section.

Hope that makes sense to you.


ok I see. First solution should work in this case I suppose?!


You mean the “fake” action? yeah that works but feels wrong to me.


I think this complexity can be avoided by altering your view hierarchy. If you use multiple outlets, the currently active content can be a sibling of the other stuff, instead of being a child.