Le graphique ajouté sur le bouton est mon blocage MouseEvent pourquoi?

Question

Bonjour à tous, le problème est que j’ai quelques boutons qui glissent vers le haut et le bas. Lorsque je suis à la hausse, j’ajoute un graphique en X pour symboliser un bouton de fermeture. Cependant, le graphique X semble bloquer l'action de mon bouton.

_{(source: flickr.com )}

J'ai un exemple dans le film J'ai travaillé sur > < !> gt; ici < < . Il y a 2 films ici, le plus gros si vous cliquez sur l'un des onglets bleus, vous verrez de quoi je parle, le bouton X apparaît, mais cliquer sur la zone X ne le laissera pas tomber. Vous devez cliquer sur la zone du bouton bleu pour le relâcher.

Maintenant, j'ai créé un film test plus petit en ajoutant le bouton X essentiellement de la même manière et si vous remarquerez qu'il fonctionne correctement (il s'animera à droite même si vous cliquez sur le graphique X)

Voici mon code dans le Big movie (j'ai caché le code de l'interpolation pour qu'il ne soit pas si long):

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;
    }
}

}

Maintenant, voici le code de mon film de test de base:

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;
}

Je ne comprends pas pourquoi vous ne pouvez pas cliquer sur le X dans l'exemple principal pour fermer l'onglet, mais vous pouvez le faire dans le mon petit film de base? Pensées, idées?

Answer 1

vous n'avez pas écrit comment vous instanciez 'closeTabX' dans le premier exemple, s'agit-il de la même classe que l'exemple plus petit (CloseTabX)?

Une solution simple est que si vous définissez ses propriétés comme suit, il ne bloquera pas les événements de la souris sur son parent:

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

Si cette classe n'a jamais été conçue pour être une cible de souris, vous pouvez également définir ces propriétés dans le constructeur de la classe pour empêcher toute instance de cette classe de bloquer les événements de la souris.