Non-trivial click behavior on nested components with `OnClick` events

This may be an example of the XY Problem, but I have a situation I’m trying to solve. I’m building a view that uses a Flex Repeater with instances that take a base view (as is normal).

Here is what it looks like:

What is happening

Whenever I click in the red area (but outside the blue area), I get a console message view clicked!!!. When I click on the label (the blue area), I get two messages (that I added for debugging): view clicked!!! followed by label clicked!!!.

What I want to happen

If the user clicks in the red area but outside of the blue area, I want to execute the OnClick event of the embedded view, which is what it currently does.

** If the user clicks on the blue area, I only want the label OnClick event to execute, not the red view event as well. **

Is this possible to do? As I’m typing this out, I realized I can use message handlers to accomplish this sort of behavior, but I am still curious if there is anything I can do besides that.

You want to enable the Stop Propagation option within your configured Label action, which can be found at the bottom of the action dialog. This prevents the click from continuing up to less-specific elements of the DOM.
Screen Shot 2021-07-27 at 8.38.35 AM

1 Like