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

What is Framer? Join the Community
Return to index
Dmytro Izotov
Posted Jul 25 - Read on Facebook

Hi everyone,
I'm working on a prototype with multiple views and when going from one view to another, the first view stays behind and still receives click events even though it's completely covered by the second view.
Is there a way to make sure that only the view that's on top receives click events?

7 Comments

Văn Công Bằng

placeBehind(), placeBefore(), sendToBack(), bringToFront(), you can use those functions after the animation end. placeBehind() and placeBefore() need specific layer, for eg: placeBehind(layerA)

Dmytro Izotov

I do that, the layer that has been placed behind still receives click events though. That's something I'm trying to avoid

Văn Công Bằng

then maybe you can use layer.ignoreEvents = true

Dmytro Izotov

I'd have to do ignoreEvents for each interactive element on the view that's placed behind. It may work but just seems not very practical. I was wondering if there is an easier way to do it.

Fabian Buijing

hmm bringToFront() works here

Chris Camargo

Do these two layers share a common superLayer, or are they both at the root of the document? If the answer is 'no', then bringToFront and sendToBack won't have any effect. Keep in mind these are just <div> elements, and are still respecting browser z-index rules.

David Louie

if one view is the child of another view you can try event.stopPropagation() to stop the event from bubbling up

bottom = new Layer
width: Screen.width
height: Screen.height
backgroundColor: "red"

front = new Layer
width: Screen.width / 3
height: Screen.height / 3
backgroundColor: "black"
superLayer: bottom
borderRadius: 20

front.center()

bottom.on Events.Click,->
print "bottom clicked"

front.on Events.Click,(event)->
#comment out the line below and see "bottom clicked" will fire
event.stopPropagation()
print "front clicked"

Read the entire post on Facebook