[SOLVED] Button behavior

Hello guys i stumbled upon weird button behaviour, when i hover “1000$” button , the hover effect also affects the “Miners” button, but when its vice versa it doesnt happen, “1000$” button is child of “Miners” button

hierarchy looks like this

image

Any idea? when i press “1000$” button the “Miner” button is pressed as well at the same time, does it mean i cant have 2 buttons like that in hierarchy? if so, is there a way i can separate it somehow without changing my hierarchy? thank for answers

Hi @smokys!

How do you resize the images?

I would suggest to check the height and width of the element components.

Hello @Albertos
Im not sure what you mean to check height and width, they seem fine. It feels like “Miner” button touch threshold is overlapping with other buttons. When i took one button from inside this “Miner” group and set the different parent the problem seems to be solved, however thats not how i want it… Because when you press “Miner” button the other ones appear, and its much easier to manage, i dont believe there is not some kind of option for that…

I thought you could previously adjust the scale of the entity independently of the height and width of the element, but I just looked into this and that doesn’t seem to be the case.

I did some research on the forum and found an old topic about the same problem. Maybe it’s by design, but for me it feels like a bug. Maybe the @playcanvas_team can take a look at this.

I tried to replicate the issue and its actually very easy to do so, just create button within 2D Screen and make another button as a child, position them next to each other, put some hover tint on it and hover over the child button, you can see that parent button hover is triggered as well

Child element events propagate to parent elements.

If you want to stop this, you have to call stopPropagation on the element event when it is fired on the child or not have the button as a child in the first place

1 Like

Curious why this is not done by the engine, as it currently does not give the expected result, for example when hovering on a button element.

Hovering on the button child element means that the hover event propagates up to the parent regardless of the position. It mirrors how HTML handles events like this so it is the ‘expected’ result

Also the grandparent, as is the case here?

1 Like

Aaaaalllllll the parents in order :slight_smile:

Child → Parent → Parent’s Parent → Parent’s Parent’s Parent etc

The chain stops when you call stopPropagation somewhere in that chain

2 Likes

Cool, thanks for explanation, consider this topic as solved.

stopPropagation indeed helped