# Perspective: components on top block click events in below components despite no events configured on top

**URL:** <https://forum.inductiveautomation.com/t/perspective-components-on-top-block-click-events-in-below-components-despite-no-events-configured-on-top/42283>\
**Category:** Ignition\
**Tags:** ignition80, perspective\
**Created:** [January 15, 2021, 5:22am UTC](https://forum.inductiveautomation.com/t/perspective-components-on-top-block-click-events-in-below-components-despite-no-events-configured-on-top/42283 "2021-01-15T05:22:33Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [January 15, 2021, 5:22am UTC](https://forum.inductiveautomation.com/t/perspective-components-on-top-block-click-events-in-below-components-despite-no-events-configured-on-top/42283/1 "2021-01-15T05:22:33Z")

</div>

v8.1.0

When two components are placed overlapping each other in a Coordinate container, the component on top will block any mouse click events on components below it where it overlaps. This is despite the top component not having any events configured on the parts of the components that overlap the component behind.

In Vision, it didn’t matter if components overlapped each other, if the top component(s) didn’t have events configured, the highest z-order component within the overlapping component which does have event would fire.

Here, the green transparent component is on top and overlaps the “Label” label which has an onClick event configured. In runtime, the onClick event only fires on the left side what isn’t overlapped by the green box. The green box has no configured events on it.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/e/de036dc5d12b2af56fff9f8564510f34c738a537.png)

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [January 15, 2021, 5:56am UTC](https://forum.inductiveautomation.com/t/perspective-components-on-top-block-click-events-in-below-components-despite-no-events-configured-on-top/42283/2 "2021-01-15T05:56:01Z")

</div>

That’s not how Web Development works though. ☹

Basic rule is that whatever is on top receives the click - even if it doesn’t have an event.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [January 15, 2021, 5:58am UTC](https://forum.inductiveautomation.com/t/perspective-components-on-top-block-click-events-in-below-components-despite-no-events-configured-on-top/42283/3 "2021-01-15T05:58:47Z")

</div>

☹ that makes things harder

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [January 15, 2021, 4:04pm UTC](https://forum.inductiveautomation.com/t/perspective-components-on-top-block-click-events-in-below-components-despite-no-events-configured-on-top/42283/4 "2021-01-15T16:04:57Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/8/98398f2c2ead598cc1dd6ade9842b46983856195.png)  
(I’m not a web developer)  
Does adding a handler with `Prevent Default` on the overlapping component do anything?

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [January 19, 2021, 5:12am UTC](https://forum.inductiveautomation.com/t/perspective-components-on-top-block-click-events-in-below-components-despite-no-events-configured-on-top/42283/5 "2021-01-19T05:12:58Z")

</div>

A colleague made a template for a repetitive set of valves, as below, and now the valves either side can’t be clicked (red circled valve is from the template left of the selected, and the pink is from the selected template but is unclickable because of the template to its right which is higher in z-order) because the embedded view’s bounding box covers them… While Perspective is great at a lot of things, some things I really have to question… I’m really not sure it’s quite ready for P&ID layouts I.e. SCADA  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/b/3b5d009eb24c27f8437cb06ac14a75204459de2b.png)

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [January 19, 2021, 5:37pm UTC](https://forum.inductiveautomation.com/t/perspective-components-on-top-block-click-events-in-below-components-despite-no-events-configured-on-top/42283/6 "2021-01-19T17:37:41Z")

</div>

I keep promising this, but the first-party solution we have for P&ID is getting close to ready and I think you’ll be very happy with it.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [January 19, 2021, 5:42pm UTC](https://forum.inductiveautomation.com/t/perspective-components-on-top-block-click-events-in-below-components-despite-no-events-configured-on-top/42283/7 "2021-01-19T17:42:46Z")

</div>

Spoiler free. 👍

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [January 19, 2021, 5:43pm UTC](https://forum.inductiveautomation.com/t/perspective-components-on-top-block-click-events-in-below-components-despite-no-events-configured-on-top/42283/8 "2021-01-19T17:43:36Z")

</div>

I think you mean “Spoiler free. 👎” 😄

---

<div class="post-metadata">

**Author:** ![ToMakPo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tomakpo/32/23875_2.png) [@ToMakPo](https://forum.inductiveautomation.com/u/ToMakPo)\
**Post date:** [December 7, 2023, 9:06am UTC](https://forum.inductiveautomation.com/t/perspective-components-on-top-block-click-events-in-below-components-despite-no-events-configured-on-top/42283/9 "2023-12-07T09:06:36Z")

</div>

> [@nminchin](#):
>
> Here, the green transparent component is on top and overlaps the “Label” label which has an onClick event configured. In runtime, the onClick event only fires on the left side what isn’t overlapped by the green box. The green box has no configured events on it.

There is a way to make it so that the top element gets ignored and when you click, you click on the one underneath. On the top element style, do `pointerEvents = none`.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [December 7, 2023, 11:18am UTC](https://forum.inductiveautomation.com/t/perspective-components-on-top-block-click-events-in-below-components-despite-no-events-configured-on-top/42283/10 "2023-12-07T11:18:45Z")

</div>

I forgot I made this post and I do actually use `pointer-events: none` these days, very useful!
