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

What is Framer? Join the Community
Return to index
Vishal Iyer
Posted Aug 18 - Read on Facebook

I'm looking for an explanation for what I think is a curious behavior. I have two simple prototypes.

#1: http://share.framerjs.com/gox7hisqbkiv/
#2: http://share.framerjs.com/t2bivpop1iro/

#1 has one layer (layerA) clicking on which triggers an event to duplicates it (layerB). Subsequent clicking on layerA doesn't trigger the event. This is what I would expect.

#2 has layerB on top of layerA right away. I have an event attached to layerA, which gets triggered even though its covered by layerB.
Why is this happening? And how is this different from #1

5 Comments

Paul Justin Farino

Hi Vishal,
Event listeners aren't carried over when you use `.copy`

Vishal Iyer

@Paul, but I'm not expecting that in #1. The original event listener on layerA doesn't work once layerB is on top. And I'm assuming that's because layerB blocks it?

Paul Justin Farino

I'm guessing yes. I'll let Koen or someone with more context chime in.
Some ancillary info:
When I `print layerB.props` it shows `ignoreEvents:false` (blocking/no events)
If you set `layerB.ignoreEvents = true` you would see the desired functionality which would be layerA printing "hello".

Chris Wang

Vishal Iyer Seems like you accidentally attached click event to layerB in #2?

Juan J. Ramirez

Vishal Iyer Every time you create a Layer over a Layer, Framer would set-up the pointer-events of the top layer as "none", so that layer would never be the target of mouse events.

When you create a copy of the layer dynamically (through a click event) your top layer pointer-event would be "auto" meaning that the top layer becomes the target of mouse events.

That's why you're seeing two different behaviors. I don't know if this is by design. Maybe Koen Bok can chime in and explain...

Read the entire post on Facebook