How does Flex click event work inside of containers?

Question

I have a VBox, I assigned a handler to click, and inside the VBox I have components such as images and texts with no handler assigned for click. Would the click function be called when I click on the text and image? If not how can I make it so without assigning handlers individually, but on the container level? Thanks

Answer 1

It's taken an hour for an answer to this question... it probably would have been faster to just try it. :)

But yes, click events bubble up to parent containers. Adding the handler to the VBox should be fine.

Answer 2

I was pretty sure that containers, such as VBox do not dispatch click events; unless they are bubbled up from the children.

However, clicking on items in your container should trigger the listener on your container, as the Click event bubbles.

Answer 3

Click events "bubble" in Flex. When you click on an images, it bubbles up to its parent, then that parent's parent and so on until there are no more parents left.

If any of these have click listeners they will trigger when they are reached in the bubbling process.

Also in the event the currentTarget will refer to the object that has the listener, and the target will be what was actually clicked.

So in your case if they click the image, the event will bubble up to the container triggering the event, in your listener function the clicked image will be the event.target and the container will be the event.currentTarget.

Also in the bubbling process, it actually starts from the root parent down, this is called the capture phase, then bubbles back up. Your event will trigger when it bubbles back up unless you specify useCapturePhase = true in the event listener. This is how you can stop an event from going to its children. If you use the capture phase then call event.stopPropagation() inside the event listener then the container will receive the event but the child image will not.