R – How to a child Sprite prevent a Mouse Event from reaching its parent

actionscript-3apache-flexeventsparent-child

Below is the code for a simple Flex actionscript project. A sprite is partially covering a hyperlink. What's happening is that when you hover over the sprite, if you're also hovering over the hyperlink, the hyperlink is activated. I want to prevent that. I want the hyperlink to be activated only when the mouse hovers over it — but not when the house hovers over the sprite which covers it.

What we have here is a sprite which is a child of the textfield in which the hyperlink resides. Therefore the question is (I think): how can a child display object interrupt the event flow so that the mouseover event never reaches the parent?

package {
import flash.display.Sprite;
import flash.display.LoaderInfo;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.events.TextEvent;
import flash.external.ExternalInterface;
import flash.filters.BevelFilter;
import flash.geom.Rectangle;
import flash.net.URLLoader;
import flash.net.URLLoaderDataFormat;
import flash.net.URLRequest;
import flash.net.navigateToURL;
import flash.text.Font;
import flash.text.StyleSheet;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import flash.utils.setTimeout;


public class SpriteHyperlinkTest extends Sprite
{
    private var style : StyleSheet = new StyleSheet();
    public function SpriteHyperlinkTest()
    {
        createOutputTextField();
    }

    public var output_txt : TextField;

    private function createOutputTextField() : void {

        ////////////// SETUP  TEXTFIELD ///////////////

        var hover : Object = new Object();
        hover.fontWeight = "bold";
        hover.color = "#0000FF";
        var link : Object = new Object();
        link.fontWeight = "bold";
        link.textDecoration = "underline";
        link.color = "#555555";
        var active : Object = new Object();
        active.fontWeight = "bold";
        active.color = "#FF0000";

        var visited : Object = new Object();
        visited.fontWeight = "bold";
        visited.color = "#cc0099";
        visited.textDecoration = "underline";

        style.setStyle("a:link", link);
        style.setStyle("a:hover", hover);
        style.setStyle("a:active", active);
        style.setStyle(".visited", visited);
        output_txt = new TextField();
        output_txt.backgroundColor = 0xFFFFFF;
        output_txt.background = true;
        //output_txt.embedFonts = true;
        output_txt.wordWrap = true;
        output_txt.multiline = true;

        output_txt.name = "output_txt";         
        output_txt.x = 100;
        output_txt.y = 100;
        output_txt.width = 300;
        output_txt.height = 200;

        output_txt.htmlText = "<b>sample <a href='http://www.google.com'>hyperlink text</a></b>"; 
        addChild(output_txt);
         var mySprite:Sprite = new Sprite();
         mySprite.graphics.lineStyle(.5,0x000000);
         mySprite.graphics.beginFill(0xff0000, 1);
         mySprite.alpha = .7;
         mySprite.graphics.drawRect(100, 100, 90, 20);
         mySprite.graphics.endFill();
         mySprite.useHandCursor = true;
         mySprite.mouseChildren = true;
         mySprite.buttonMode = true;
         mySprite.name = "Sprite1";
         this.addChild(mySprite);

         output_txt.styleSheet = style;
    }

}
}

Best Answer

sprite which is a child of the textfield

Wrong - it's impossible. TextField is not a DisplayObjectContainer and hence cannot have any children of its own. In your code text field and the sprite are siblings - both are children of the document class.

how can a child display object interrupt the event flow so that the mouseover event never reaches the parent?

Parents can prevent children from getting mouse events using the mouseChildren property, not the other way.