Children Buttons Trigger Parent "mousedown" Event

Help & Support
1

Hi,

I have a problem today that I encountered while making a user interface. I’m trying to have a dialog box with buttons that appear to give you choices in the conversation. Everything works fine except for the option to skip the text crawl that I added. I made it so that, when you press the textbox itself, text is skipped, but for some reason, if I press the buttons (which are indirect children of the textbox) then those mouse events also trigger the skip event I have in place. I’ve made a minimal project showing what I mean:

https://playcanvas.com/project/568010/overview/children-buttons-example

In the example above, when you click on the textbox, the red square spins, but if you press the button on the top right of the textbox, then the square also spins, because it is triggering the textbox’s “mousedown” event. I understand why it was implemented this way (making interfaces with more complex shapes) but I’d like to know how to disable this without having to change the hierarchy (if possible).

Thank you!

2

I believe you can call stopPropagation() to do this. https://developer.playcanvas.com/en/api/pc.ElementInputEvent.html#stopPropagation

3

Just to be clear, I would have to call stopPropagation() in the child button’s “mousedown” event, correct?

4

Yep!: https://playcanvas.com/project/568014/overview/childrens-buttons-example-forums

5

Thanks a bunch! :+1: