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

What is Framer? Join the Community
Return to index
Kjelle Vergauwe
Posted Feb 17 - Read on Facebook

I'm having some difficulties with the ignoreEvents property

Layer A has a sublayer Layer B
Both have a click handler.

Clicking Layer B shows a popup ( Layer C)
Clicking Layer A hides the popup ( Layer C)

But each time I click Layer B it also triggers the click from Layer A. If I set Layer A's ignoreEvents property to true in the click handler, it still runs the code in the click handler of Layer A. Which results into showing and hiding the popup instantly. Am I missing something? Going crazy about this problem.

3 Comments

Benjamin Den Boer

Hey Kjelle Vergauwe, event.stopPropagation() is what you need. I've recreated the situation you've described in a simple example. The circle is layerB, a subLayer of layerA. Clicking layerB makes a layer called "modal" appear behind the layers. Clicking layerA hides it.

Normally, clicking layerB also triggers the click event of layerA, but if we use event.stopPropagation within the event handler of layerB, we can prevent this behaviour. :)

"stopPropagation() prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event."

See: http://share.framerjs.com/mxiqrfioa8ao/

Kjelle Vergauwe

Oh nice! :) Thanks Benjamin Den Boer !

Fran Pérez

This is awesome. Benjamin, you guys need to document all this niceties somewhere! :)

Read the entire post on Facebook