# Event propagation

**URL:** <https://forum.code.org/t/event-propagation/35639>\
**Category:** Coding and Debugging Help\
**Created:** [December 27, 2021, 7:38pm UTC](https://forum.code.org/t/event-propagation/35639 "2021-12-27T19:38:22Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![greiber](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/greiber/32/6369_2.png) [@greiber](https://forum.code.org/u/greiber)\
**Post date:** [December 27, 2021, 7:38pm UTC](https://forum.code.org/t/event-propagation/35639/1 "2021-12-27T19:38:22Z")

</div>

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

**Link to the project or level:** [[App Lab - Code.org](https://studio.code.org/projects/applab/pmZZW_D0dwbF_G514uK2AhpSGqwtlfOG4JJc4ynPsFI)]  
**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?

---

<div class="post-metadata">

**Author:** ![greiber](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/greiber/32/6369_2.png) [@greiber](https://forum.code.org/u/greiber)\
**Post date:** [December 27, 2021, 8:22pm UTC](https://forum.code.org/t/event-propagation/35639/2 "2021-12-27T20:22:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jdonwells](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/jdonwells/32/7900_2.png) [@jdonwells](https://forum.code.org/u/jdonwells)\
**Post date:** [December 30, 2021, 2:30pm UTC](https://forum.code.org/t/event-propagation/35639/3 "2021-12-30T14:30:07Z")

</div>

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