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

Ignition Early Access
1

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. :pensive:

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?

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

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…

1 Like
3

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.

4

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

image
image1274×620 108 KB

5

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

6

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. :sob:

7

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)

8

It will be create if your boss let you share it :stuck_out_tongue_winking_eye: