Flex - Eviter un événement de clic sur le conteneur lorsque vous cliquez sur le composant inclus

Question

J'ai une application Flex dans laquelle j'utilise un canevas pour contenir plusieurs autres composants. Sur ce Canvas il y a un bouton qui est utilisé pour invoquer un flux particulier à travers le système. Si vous cliquez ailleurs sur le canevas, un volet d'informations apparaît et affiche plus d'informations sur l'enregistrement représenté par ce contrôle. Le problème que j'ai est que parce que le bouton se trouve à l'intérieur du canevas à chaque fois que l'utilisateur clique sur le bouton, l'événement de clic est déclenché à la fois sur le bouton et le canevas. Est-il possible d'éviter que l'événement click ne soit déclenché sur l'objet Canvas si l'utilisateur clique sur une zone couverte par un autre composant?

J'ai créé une petite application de test simple pour démontrer 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 actuel lorsque vous cliquez sur le bouton, vous verrez deux entrées faites dans la zone de texte, « Bouton clicked » suivi "Canvas Clicked" même si la souris n'a été cliquée qu'une seule fois. Je voudrais trouver un moyen que je pourrais éviter d'avoir la deuxième entrée faite de telle sorte que lorsque je clique sur le bouton, seule l'entrée "Bouton Cliqué" est faite, mais si je devais cliquer ailleurs dans le Canevas, L'entrée "Canvas Clicked" apparaît 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 arrêter l'événement de continuer, vous appelez

event.stopImmediatePropagation() 

Answer 2

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 clic sur la toile et non le bouton et 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, ce sont des idées du haut de ma tête ... Je vais créer une petite application de test et voir si ces travaux ...

Answer 3

réponse de Laplie a travaillé comme un charme. Pour les personnes intéressées 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 une ligne supplémentaire dans la méthode OnButtonClick.