Event propagation

CS Principles Coding and Debugging Help
1

Overlapped cards fire all stacked click-events, not just the top one.

Link to the project or level: [App Lab - Code.org]
What I expect to happen:
I only want the top cards click-event to fire
What actually happens:
instead, all overlapped cards click events fire (sometimes?)
What I’ve tried:
I was hoping to just use JS native stopPropagation with no love. Is there a work-around?

2

I fixed my own problem by hacking in 3 dom elements for each card.

  • display box ==> shows the background image
  • click mask ==> transparent element covering the card (unclickable)
  • click surface ==> transparent element to which the click event is attached

This seems to work, though my behavior was frustratingly random before. But now, my 3 layer cards effectively mask themselves from the cards beneath.

3

If you use onEvent() it handles overlapping images correctly. Many people confuse App Lab with JavaScript. I assure you they are not the same.