Hi everyone,
I’m working with OutSystems UI and facing an issue related to parent–child containers and click events.
I have a parent container with an On Click action (used for navigation). Inside this parent container, there is a child container which also needs its own click action.
The problem is:
When I click the child container, the parent container’s On Click action is also triggered due to event bubbling.
I have tried the event.propogation() in the Java script , but this is also not working
My questions are:
What is the recommended best practice in OutSystems UI for handling this scenario?
Is there any supported way to prevent the parent container action from executing when clicking the child?
Should nested clickable containers be avoided entirely, and if so, what is the preferred UI pattern to replace this design?
Any guidance or real-world patterns would be really helpful.
Hi Samuel,
if I understand correctly, what you are saying... this is expected behavior in OutSystems UI.
On Click actions are based on standard DOM click events, so event bubbling applies. When you click a child container, the parent container’s On Click will also fire.
Using event.stopPropagation() in custom JavaScript is not reliable in OutSystems UI, as clicks handlers are managed by the framework.
Best practice: avoid nested clickable containers. Use a single clickable parent (for navigation) and explicit child actions such as Buttons, Links or Icons for secondary actions. If both must be clickable, the only supported workaround is to add conditional logic in the parent On Click to decide whether it should execute.
Useful links:
Best, Miguel
Hi @Miguel Verdasca,
I think you summarized the answer to @Jensing Samuel question. But let me add a minor adjustment.
I think it is better to avoid this scenario from the start. But we can use event.stopPropagation() in complex scenarios.
We can achieve this by adding the OnClick event on the child container in the OnReady event of the screen/block, thus we can catch the event object, and use it to prevent any further event triggering.
You can check this approach in the attached oml file.
Regards,Mustafa.
I think you need to use event.stopPropagation(); into your Javascript node used inside onClick action of child container
I think this would not be feasible @Mostafa Othman.
As I think that the example described by @Jensing Samuel is done by defining the OnClick event using OutSystems, and OutSystems does not pass the JavaScript's event object when triggering an event.
Thus we will not be able to catch it when triggered to stop the event bubbling. Unless we added the OnClick event using JavaScript to the container, and used stopPropagation in it.
Hi Jensing Samuel,OutSystems UI doesn’t reliably stop event bubbling. Use a Boolean variable (IsChildClicked) set it to True on child click. In the parent On Click, navigate only if IsChildClicked = False otherwise reset the flag and do nothing. Thanks,Vipin Yadav
I do agree with @Vipin Yadav with this approach, as it is the most direct and simple.
But take into consideration it will only work in simple scenarios as single nested container. Other wise it will require a lot of overhead logic to implement.
In complex scenarios stopPropagation will do the job.
I know there are many solutions/tricks to prevent one of the two logics ( parent or child) But for me, the best practice is to avoid using nested clickable containers.
Its not good practice, there should not nested clickable elements, just 1 clickable parent is enough
When user clicks on any children, in the OnClick action of the parent, use javascript to determine which element is clicked then execute the logic for the specified one
I would like to add a minor adjustment to your approach @Shingo Lam.
We need to bind the OnClick event using JavaScript to the parent element, in order to catch the event object, and use it to detect which child element was clicked.
Hi @Jensing Samuel,
I think that you got the answer you were looking for, but let me add my two cents.
1. One Nested Container
If your design include a single nested container, then I the approach of @Vipin Yadav will do the job. As the child OnClick event will always be triggered before the parent, thus you can stop it using a flag (check attachment for "OnClick" & "OnClick_If").
2. Multi Layer of Containers
In the case that your design contains a lot of nested elements, each with its OnClick event, and you want a child not to trigger its parents, then stopPropagation() method would do the job.
However, you need to take care of a few points:
We used onclick instead of addEventListener, since we want to add a bind a single click even to the container, and use anonymous function to catch the event triggered. Also, because the onclick method does not require identifier to remove the binding.
This will make sure that all parents, regarding their number, will not be triggered(check attachment for "OnClick_StopPropagation").
In conclusion, I do agree with what @Miguel Verdasca that it is not optimal to use nested click events, but if it is a must, this could be a workaround.
Finally, check the attached oml file for a sample implementation of the methods mentioned above, and hope this was of help.