This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Calvin Teoh
Posted Oct 07 - Read on Facebook

Any idea how I set an Event Listener to fire on the capture phase of an event, not the bubble?

I have a navigation bar with that I need to tie a MouseOut event too, but it contains child elements which also have MouseOut events tied to them.

At the moment any MouseOut from the child layers cause the parent Navigation Bar to fire it's handlers too.

I know there is stopPropagation() but I have many child elements in the nav bar that don't have listeners on them to stop the Propogation of child events

6 Comments

Andrew Nalband

Hi Calvin, I'm having a hard time imagining this - can you share your project so we can help?

Calvin Teoh

Link to file: http://share.framerjs.com/yjxavlouaktb/

So Subnav holds items, but as you can see the Subnavs mouse out event fires when I hover over the child items AND also when I mouse out of the child items.

I need a way that the subnavs mouse out event only fires when I mouse out of the entire subnav area

Andrew Nalband

uff, this is a tricky one - I've tried a couple of things, but those sublayers are catching the mouseOver and registering a mouseOut on your Subnav - I can't come up with anything yet

Jordan Robert Dobson

It's likely you need an event on the entire document... or a specific larger area... and you'll need to just take the x/y position and see if it's within the bounds of a container or not. You'll want to set some flags to understand your state.

Andrew Nalband

Jordan's pointer module would be quite useful! Actually, it might be the best way.

Jordan Robert Dobson

Here you go: http://jrdn.io/dSnx - This should help for your hit detection stuff.

Read the entire post on Facebook