Flex Avoid clicking on the container when clicking a closed component.

Question

I have a Flex application in which I use Canvas to host several other components. There is a button on this canvas that is used to call a specific thread through the system. If you click anywhere on the canvas, this can lead to the appearance of a details panel displaying more information about the record represented by this control.

The problem is that since the button is inside the Canvas, when the user clicks the Button, the click event is fired on both the Button and the Canvas. Is there a way to avoid clicking a click event on a Canvas object if the user clicks on an area covered by another component?

I created a simple little test application to demonstrate the problem:

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ private function onCanvasClick(event:Event):void { text.text = text.text + "\n" + "Canvas Clicked"; } private function onButtonClick(event:Event):void { text.text = text.text + "\n" + "Button Clicked"; } ]]> </mx:Script> <mx:Canvas x="97" y="91" width="200" height="200" backgroundColor="red" click="onCanvasClick(event)"> <mx:Button x="67" y="88" label="Button" click="onButtonClick(event)"/> </mx:Canvas> <mx:Text id="text" x="97" y="330" text="Text" width="200" height="129"/> </mx:Application> 

As soon as you click the button, you will see two entries made in the text box, “Clicking the button” and then “Canvas Clicked”, even if you click the mouse only once.

I would like to find a way that I could prevent the second entry from being made so that when I click the button, only the “Button Clicked” entry is created, but if I clicked anywhere on the Canvas, the Canvas Clicked “is still will be displayed.

Answer 1

The event continues because event.bubbles is set to true. This means that everything presented in the view is an event. To stop an event, you call

 event.stopImmediatePropagation() 

Answer 2

Lapley's answer was like a charm. For those interested, the updated code is as follows:

 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ private function onCanvasClick(event:Event):void { text.text = text.text + "\n" + "Canvas Clicked"; } private function onButtonClick(event:Event):void { text.text = text.text + "\n" + "Button Clicked"; event.stopImmediatePropagation(); } ]]> </mx:Script> <mx:Canvas x="97" y="91" width="200" height="200" backgroundColor="red" click="onCanvasClick(event)"> <mx:Button x="67" y="88" label="Button" click="onButtonClick(event)"/> </mx:Canvas> <mx:Text id="text" x="97" y="330" text="Text" width="200" height="129"/> </mx:Application> 

The only difference is one extra line in the onButtonClick method.

Answer 3

I have 2 ideas, first try the following:

 btn.addEventListener(MouseEvent.Click,function(event:MouseEvent):void{ event.stopImmediatePropagation(); ... });
btn.addEventListener(MouseEvent.Click,function(event:MouseEvent):void{ event.stopImmediatePropagation(); ... }); 

if this does not work, see if you can add a click listener to the canvas, not a button, and check the target property of the event object. sort of:

 btn.addEventListener(MouseEvent.Click,function(event:MouseEvent):void{ if(event.target == btn){ ... } else{ ... } });
btn.addEventListener(MouseEvent.Click,function(event:MouseEvent):void{ if(event.target == btn){ ... } else{ ... } }); 

Again, these are some ideas in my head ... I am creating a small test application and see if they work ...