Can an overlapping sibling prevent an Event?

Question

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 mouse hovers over the sprite which covers it.

package {

import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.events.TextEvent;
import flash.text.Font;
import flash.text.StyleSheet;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;


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

    public var output_txt : TextField;

    private function createOutputTextField() : void {

            // set styles
            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'&gt;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;
    }

  }
}

Answer 1

I'd add a rollOver (or whatever event you're trying to block) event listener to the sprite on top of the hyperlink. In the rollover handler, be sure to call event.stopImmediatePropagation() and that should prevent the hyperlink underneath from receiving the event.

Answer 2

I've never seen that sort of behavior before. Your sample code doesn't even assign events. I would be curious to see how you are assigning the events, because that in itself could be the cause of your problem.

Answer 3

I've almost found a workaround. It is just amazing that there isn't some object that you can place on top of the textfield in order to prevent its seeing the mouse overing over a hyperlink.

Here, for the record, are some of the things I've tried.

stopPropagation () // didn't work stopImmediatePropagation(P //didn't work

Because the textfield and the sprite are siblings on the displaylist, I think all of the event propagation stuff is irrelevant. All of that has to do with ancestors and descendants, but what we're dealing with here is neither.

I tried placing another ('cover') textfield on top of the 'target' textfield. I tried setting the cover.visible = false; but that just meant it effectively wasn't there. I tried setting its alpha to .1, but that didn't work either -- just like the covering sprite, it allowed the mouseOver to go through it, so that the hyperlink responded.

I thought about trying to use preventDefault () on the hyperlink but a) I don't know how to reference the hyperlink (it has no ID) and b) the only event that is dispatched from a hyperlink is the TextEvent, and that's when it's clicked. We're not clicking, we're hovering. So I don't know what event to cancel.

The other thing I thought to do was to a kind of a fake 'cancel'. That is, maybe I could set the textformat, or style, of the hyperlink to look like normal text while the mouse is hovering over the sprite. The hyperlink would actually be being activated, but it would look like it isn't being activated because the style would be changed. This is what worked.

But it's only a fake visual workaround...