- Home /
Stop Click Propagation in nested Buttons (UIElements)
Hey all, I am creating an EditorWindow based on the new UI Elements. The window is tab based, so on the top you can click on one of the elements to change the tab, inside these elements there is also a button to close a tab. Visually it looks like the following
Since these are 2 different elements that require the click event I have nested the close Button inside the Parent Button. (I am not sure if this is the correct way to do it, please correct me if it isn't). The UXML for it looks like this:
<engine:Button name="jlog-terminal-tab-preview" class="jlog-terminal-tab-preview">
<engine:VisualElement class="jlog-terminal-tab-preview-content">
<engine:Label class="jlog-terminal-tab-preview-title" binding-path="_tabName" />
<engine:Button name="jlog-terminal-tab-preview-close" text="X" />
</engine:VisualElement>
</engine:Button>
The problem now is, that if the close button is clicked, the click event propagates down to the parent button and also triggers its click event. How can I prevent this?
Answer by andrew-lukasik · Jul 21, 2020 at 01:44 PM
What about no nesting tho:
<engine:VisualElement>
<engine:Button text="Tab" />
<engine:Button text="X" />
</engine:VisualElement>
Style will adjust their relative size.
The image doesn't show it clearly, but the parent button goes under the close button, and i thought it would cause the same problem since the nested button would still be over the parent button. But that was not the case, if i do it like you showed, the Clear button consumes the event. Thanks :)
Your answer
Follow this Question
Related Questions
Multiple Cars not working 1 Answer
Distribute terrain in zones 3 Answers
Parsing Error, code in android for a button 2 Answers
How to make a custom class inherited from Unity's GUI? 0 Answers
Cannot change Button interactable in a UnityAction 3 Answers