Flash AS3: How to prevent MouseEvent.MOUSE_OUT when you mouse_over a child sprite

actionscript-3flash

All,

Here's my situation…

The UI of my Flash application is a grid. Each row of the grid is a sprite that contains a number of child sprites (UI controls) that respond to mouse events

Each row of the grid should have a hover effect – i.e., when you hover over the row, the row's background should change color.

This is accomplished easily:

rowSprite.addEventListener(MouseEvent.MOUSE_OVER, highlightRow, false, 0, true);
rowSprite.addEventListener(MouseEvent.MOUSE_OUT, unhighlightRow, false, 0, true);

This works fine, EXCEPT that when the user rolls over any of the row's child sprites, the row's MOUSE_OUT event is fired, and the row is "unhighlighted". This isn't what I want.

In other words – I'd like the row to be unhighlighted only when you roll OUTSIDE of the row, not when you roll over a child sprite within the row.

A possible solution: in the unhighlightRow function, test whether the user's mouse position is still within the row sprites bounds. But I'm guessing that's not the most elegant or efficient solution.

This must be an incredibly common problem. What's the best solution?

Thanks in advance!

Best Answer

You can use ROLL_OVER and ROLL_OUT instead of MOUSE_OVER and MOUSE_OUT in such cases:

http://kinderas.blogspot.com/2008/12/quicktip-mouseover-vs-rollover.html

Related Solutions

How to stop Mouse Out event on Flex Canvas firing for child elements

You should use MouseEvent.ROLL_OVER and MouseEvent.ROLL_OUT events instead.

From the Flash CS4 documentation:

When the mouse enters the area of a display object or the area of any of its children from an object that is not one of its children, the display object dispatches the rollOver event. This is different behavior than that of the mouseOver event, which is dispatched each time the mouse enters the area of any child object of the display object container, even if the mouse was already over another child object of the display object container.

R – MOUSE_OUT events not firing on child when parent is mouseEnabled=false, mouseChildren=false

there must be something wrong with your code ... i have a minimum setup here:

package  {
    import flash.display.*;
    import flash.events.*;
    import flash.geom.ColorTransform;
    public class Test extends Sprite {
        private var child:Sprite
        public function Test() {
            this.addChild(child = new Sprite());
            child.graphics.beginFill(0xFF0000);
            child.graphics.drawRect(0, 0, 100, 20);
            child.addEventListener(MouseEvent.CLICK, onClick);
            child.addEventListener(MouseEvent.MOUSE_OUT, onOut);
            child.addEventListener(MouseEvent.MOUSE_OVER, onOver);
        }
        private function onOver(e:MouseEvent):void {
            child.transform.colorTransform = new ColorTransform(0, 0, 0, 1, 0, 0xFF);
        }
        private function onOut(e:MouseEvent):void {
            child.transform.colorTransform = new ColorTransform();
        }
        private function onClick(e:MouseEvent):void {
            this.mouseChildren = this.mouseEnabled = false;
        }
    }
}

should turn green, when you mouse over, and red again, if you mouse out ... on click, it is disabled with this.mouseChildren = this.mouseEnabled = false ... on my machine, this triggers mouseOut (so the rectangle turns red again) ... this makes sense to me ... and the thing with getting mouse outs when clicking, is a definite indicator to me, you must be having a bug somewhere ... could you try to reduce the problem and post it?

greetz

back2dos

Related Topic