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

What is Framer? Join the Community
Return to index
Jacky Lee
Posted Aug 06 - Read on Facebook

Hello everyone! How do I prevent triggering the click event on a particular layer when it is sitting behind another layer? Currently I can trigger a click event on a button when it is actually sitting behind everything...

6 Comments

Ces Cortez

Hi there's probably a better way but the first thing that comes to mind is setting the layer's CSS to pointer-events: none

Layer.style
"pointer-events": "none"

Ces Cortez

(And that second line should be indented.)

Jacky Lee

Thanks Ces Cortez! I tinkered more with it and found a solution (not sure if it's the right way), but what I did was just set a blank on click function on the layer that's sitting on top.

"layerOnTop.on(Events.Click, function(){})"

And make sure the layer index are also correct.

This did the trick for me

Jacky Lee

Ces Cortez I'll give your solution a try as well, cheers for the quick response!

Marc Krenn

Jacky, that's how I would do it as well.

Tisho Georgiev

Layers without any event handlers attached have pointer-events set to none by default, which is why you're able to click the button through other layers. You can change that by setting this property:

layerOnTop.ignoreEvents = false

This is really the property that gets set when you set the blank click handler, so you might as well use it directly.

Read the entire post on Facebook