seguimiento - Flex: evite el evento click en el contenedor cuando se hace clic en el componente incluido

google tag manager

Question

Tengo una aplicación Flex en la que estoy usando un lienzo para contener varios otros componentes. En ese lienzo hay un botón que se utiliza para invocar un flujo particular a través del sistema. Al hacer clic en cualquier otro lugar del lienzo, debe aparecer un panel de detalles que muestra más información sobre el registro representado por este control.

El problema que tengo es que, como el botón se encuentra dentro del lienzo cada vez que el usuario hace clic en el botón, se activa el evento de clic tanto en el botón como en el lienzo. ¿Hay alguna forma de evitar que el evento click se active en el objeto Canvas si el usuario hace clic en un área cubierta por otro componente?

Creé una pequeña aplicación de prueba para demostrar el problema:

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

Tal como está al hacer clic en el botón, verá dos entradas hechas en el cuadro de texto, "Botón presionado" seguido de "Lienzo hecho clic", aunque se hizo clic en el mouse una sola vez.

Me gustaría encontrar una forma de evitar la segunda entrada, de modo que cuando hago clic en el botón solo se haga la entrada "Hacer clic en el botón", pero si tuviera que hacer clic en cualquier otro lugar del lienzo, haga clic en "Lienzo". la entrada aún aparecería

Answer 1

El evento continúa porque event.bubbles está establecido en verdadero. Esto significa que todo en la jerarquía de visualización obtiene el evento. Para evitar que el evento continúe, usted llama

event.stopImmediatePropagation()

Answer 2

Tengo 2 ideas, primero intente esto:

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

si eso no funciona, vea si puede agregar el oyente de clic al lienzo y no al botón y verificar la propiedad de destino en el objeto de evento. algo como:

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

De nuevo, estas son algunas ideas de lo mejor de mi cabeza ... Crearé una pequeña aplicación de prueba y veré si funcionan ...

Answer 3

La respuesta de Laplie funcionó como un encanto. Para aquellos interesados, el código actualizado se ve así:

<?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 única diferencia es la línea adicional en el método onButtonClick.