El gráfico agregado sobre el botón es mi MouseEvent de bloqueo ¿por qué?

Question

Hola a todos, mi problema hoy es que tengo un par de botones que se deslizan hacia arriba y hacia abajo, cuando en el estado hacia arriba agrego un gráfico X para simbolizar un botón de cierre. Sin embargo, el gráfico X parece estar bloqueando la acción de mi botón.

_{(fuente: flickr.com )}

Tengo un ejemplo en la película He estado trabajando en > < !> gt; aquí < < . Hay 2 películas aquí, la grande si haces clic en cualquiera de las pestañas azules verás de lo que estoy hablando, aparece el botón X, pero al hacer clic sobre el área X no se soltará el botón. Debe hacer clic en el área del botón azul para soltar el botón nuevamente.

Ahora he hecho una película de prueba más pequeña agregando el botón X básicamente de la misma manera y si notas que funciona bien (se animará a la derecha incluso si haces clic sobre el gráfico X)

Aquí está mi código en la película Big (escondí el código de interpolación para que no sea tan largo):

function handleButtonClick(event:MouseEvent):void {
var button:MovieClip=event.target as MovieClip;
var id:Number=Number(button.name.split("button")[1]);

dispatchEvent(new CustomEvent(CustomEvent.PAUSE_MOVIE, {}));

if (! $btn1&&! $btn2) {
    if (storeButton2==buttons[id]) {
        closeTabX.x = buttons[1].width - (closeTabX.width + 10);
        closeTabX.y=buttons[1].height/2-15;
        buttons[1].addChild(closeTabX); // X added here
        $btn2=true;
        $btn1=false;
    } else if (storeButton1 == buttons[id]) {
        closeTabX.x = buttons[0].width - (closeTabX.width + 10);
        closeTabX.y=buttons[0].height/2-15;
        buttons[0].addChild(closeTabX); // X added here
        $btn1=true;
        $btn2=false;
    }
} else if ($btn1 && !$btn2) {
    if (storeButton2==buttons[id]) {
        buttons[0].removeChild(closeTabX); // X removed here
        buttons[1].addChild(closeTabX); // X added here
        $btn2=true;
        $btn1=false;
    } else if (storeButton1 == buttons[id]) {
        buttons[0].removeChild(closeTabX); // X removed here
        $btn1=false;
    }
} else if ($btn2 && !$btn1) {
    if (storeButton2==buttons[id]) {
        buttons[1].removeChild(closeTabX);
        $btn2=false;
    } else if (storeButton1 == buttons[id]) {
        buttons[1].removeChild(closeTabX); // X removed here
        buttons[0].addChild(closeTabX); // X added here
        $btn1=true;
        $btn2=false;
    }
}

}

Ahora aquí está el código en mi película de prueba básica:

var blueButton:MovieClip;
var closeBtnX:MovieClip;

blueButton = new BlueButton;
blueButton.buttonMode = true;

closeBtnX = new CloseTabX;
closeBtnX.x = blueButton.width/2 - closeBtnX.width;

addChild(blueButton);


blueButton.addEventListener(MouseEvent.MOUSE_UP, specialClick);

function specialClick(event:MouseEvent):void
{
  blueButton.addChild(closeBtnX); // X added here
  blueButton.x = blueButton.x+10;
}

No entiendo por qué no puedes hacer clic en la X en el ejemplo principal para cerrar la pestaña, ¿pero puedes hacerlo en mi pequeña película básica? ¿Pensamientos, ideas?

Answer 1

no publicaste cómo estás instanciando 'closeTabX' en el primer ejemplo, ¿es la misma clase que el ejemplo más pequeño (CloseTabX)?

Una 'solución' simple es que si establece sus propiedades de la siguiente manera, no bloqueará los eventos del mouse en su elemento primario:

closeTabX.mouseEnabled = false;
closeTabX.mouseChildren = false;

Si esa clase nunca está destinada a ser un objetivo del mouse, también puede establecer estas propiedades en el constructor de la clase para evitar que cualquier instancia de esa clase bloquee los eventos del mouse.