Flex - Évitez les événements click sur le conteneur lorsque vous cliquez sur un composant enfermé

Question

J'ai une application Flex dans laquelle j'utilise un canevas pour contenir plusieurs autres composants. Sur ce canevas, il y a un bouton qui est utilisé pour appeler un flux particulier dans le système. Si vous cliquez n'importe où sur le canevas, un volet de détails apparaîtra, affichant davantage d'informations sur l'enregistrement représenté par ce contrôle.

Le problème que je rencontre est que, comme le bouton se trouve dans le canevas chaque fois que l'utilisateur clique dessus, l'événement click est déclenché à la fois sur le bouton et sur le canevas. Existe-t-il un moyen d'éviter que l'événement click ne soit déclenché sur l'objet Canvas si l'utilisateur clique sur une zone recouverte par un autre composant?

J'ai créé une petite application de test simple pour illustrer le problème:

<?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>

En l'état, lorsque vous cliquez sur le bouton, vous verrez deux entrées effectuées dans la zone de texte, " Bouton cliqué " suivi de " Canvas Clicked " même si la souris n’a été cliquée qu’une fois.

J'aimerais trouver un moyen d'éviter que la deuxième entrée ne soit faite de telle sorte que lorsque je clique sur le bouton, seul le " bouton cliqué "" l’entrée est faite, mais si je cliquais n'importe où sur le canevas, le "Canvas clicked" l'entrée apparaîtrait toujours.

Answer 1

L'événement se poursuit car event.bubbles est défini sur true. Cela signifie que tout dans la hiérarchie d'affichage obtient l'événement. Pour que l’événement ne se poursuive pas, appelez

.

event.stopImmediatePropagation()

Answer 2

La réponse de Laplie a fonctionné à merveille. Pour ceux que cela intéresse, le code mis à jour ressemble à ceci:

<?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>

La seule différence est la ligne supplémentaire dans la méthode onButtonClick.

Answer 3

J'ai 2 idées, essayez d'abord ceci:

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

si cela ne fonctionne pas, voyez si vous pouvez ajouter l'écouteur de clics à la grille et non au bouton, puis vérifiez la propriété target sur l'objet événement. quelque chose comme:

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

Encore une fois, voici quelques idées qui me viennent à l’esprit ... Je vais créer une petite application de test et voir si ça marche ...