# Using event bubbling effect to pass click event to underneath object in perspective

**URL:** <https://forum.inductiveautomation.com/t/using-event-bubbling-effect-to-pass-click-event-to-underneath-object-in-perspective/51297>\
**Category:** Ignition Early Access\
**Created:** [September 24, 2021, 6:57am UTC](https://forum.inductiveautomation.com/t/using-event-bubbling-effect-to-pass-click-event-to-underneath-object-in-perspective/51297 "2021-09-24T06:57:57Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [September 24, 2021, 6:57am UTC](https://forum.inductiveautomation.com/t/using-event-bubbling-effect-to-pass-click-event-to-underneath-object-in-perspective/51297/1 "2021-09-24T06:57:57Z")

</div>

Hello,

Right now the perspective doesn’t support SVG click event to passes the name of the selected element.  
I try to have this simply by adding some transparent label underneath each element and assign of event click script for my requirement.  
I put the label underneath SVG because I want to use the CSS hover effect for each element.

As of 8.1, we have some options called stop propagation. If I uncheck this option, the click event of SVG should pass to the underneath object but it doesn’t work. 😔

Is it a bug or did I understand the event bubbling effect incorrectly?  
Is there any workaround for this?  
Isn’t it nice to have a click event that passes the element name or the selection property for SVG, like table, so we can find which element click by the user?

```auto
selection {
  "enabled": true,
  "data": [
    {
      "name": "south part"
    }
  ]
}

```

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 24, 2021, 7:02am UTC](https://forum.inductiveautomation.com/t/using-event-bubbling-effect-to-pass-click-event-to-underneath-object-in-perspective/51297/2 "2021-09-24T07:02:30Z")

</div>

if you put a style `pointer-events:none` on the svg, clicks will go through it. atleast in chrome, not tested in workstation.  
you might also have to put `pointer-events:auto` on the labels but probably not.

Svgs events would require javascript tho i guess they could expose it, it shouldnt be to hard…

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [September 24, 2021, 7:10am UTC](https://forum.inductiveautomation.com/t/using-event-bubbling-effect-to-pass-click-event-to-underneath-object-in-perspective/51297/3 "2021-09-24T07:10:02Z")

</div>

> [@victordcq](#):
>
> pointer-events

Sadly, the `pointer-events: auto` will also disable the CSS hover effect and even the CSS cursor effect.

I can use, coordinate to detect the element but it is really hard and time-consuming for me but also with the responsive design we can't do that.

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [September 24, 2021, 7:19am UTC](https://forum.inductiveautomation.com/t/using-event-bubbling-effect-to-pass-click-event-to-underneath-object-in-perspective/51297/4 "2021-09-24T07:19:24Z")

</div>

I wonder why I can’t assign value to pointer-events property in script:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/d/ad4fb261b6f23c0000c4410e7c65d1fc1fd2bace.png)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 24, 2021, 7:23am UTC](https://forum.inductiveautomation.com/t/using-event-bubbling-effect-to-pass-click-event-to-underneath-object-in-perspective/51297/5 "2021-09-24T07:23:03Z")

</div>

try `self.props.style['pointer-events']="none"`

but yes this will also prevent hover on the svg styles… i suppose you could trigger the style events also when hovering the element below it with a bunch of code xd

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [September 24, 2021, 7:34am UTC](https://forum.inductiveautomation.com/t/using-event-bubbling-effect-to-pass-click-event-to-underneath-object-in-perspective/51297/6 "2021-09-24T07:34:06Z")

</div>

> [@victordcq](#):
>
> self.props.style['pointer-events']

Thanks, the ['pointer-events'] is very interesting.  
Even Power BI has a custom visual for SVG with this feature, it is very sad we are limited like this in perspective. 😭

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 24, 2021, 9:19am UTC](https://forum.inductiveautomation.com/t/using-event-bubbling-effect-to-pass-click-event-to-underneath-object-in-perspective/51297/7 "2021-09-24T09:19:54Z")

</div>

Yeah im not quite sure what the reason is its not possible, guess the devs just never had the time yet, just like with the xy graphs they recently added on click events too.

I have an svg custom component which has some (messages) events on it, but it kinda works a bit different than the ignition component and i have no docs xD so not sure if it’s worth trying to figure that out lol (also idk if i can just share a module tho, ill have to ask my boss)

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [September 24, 2021, 9:30am UTC](https://forum.inductiveautomation.com/t/using-event-bubbling-effect-to-pass-click-event-to-underneath-object-in-perspective/51297/8 "2021-09-24T09:30:42Z")

</div>

It will be create if your boss let you share it 😜