Activating a button underneath the mouse: how do you capture the OVER event?

Question

Observed behavior:

1. I have a page of UI sliding onto the screen.
2. On slide complete, activate buttons.
3. If mouse already over a button, the rollover does not happen (since MOUSE_OVER hasn't technically occurred)

Desired behavior: 1, 2 the same, but on 3, I see my rollover.

Is there any way to easily do this, aside from something brute-force, like tracking the mouse and comparing its position against all buttons dims?

Thanks!

Answer 1

You can dispatch a mouseMove event to your top most container with x and y coordinates of the current mouse position. This will emulate the effect of the user having moved his mouse.

private function moveComplete():void
{
    topLevelContainer.dispatchEvent(new MouseEvent(MouseEvent.MOUSEMOUSE, true, false, topLevelContainer.mouseX, topLevelContainer.mouseY);
}

Answer 2

on button init i set the private var _bounds:

_bounds = getBounds(this);

on activate, I call:

if (isMouseOver()) doOver(true);

and then the function:

private function isMouseOver():Boolean {
    //trace ("isMouseOver:");
    var xBool:Boolean = _bounds.left < mouseX && mouseX < _bounds.right;    
    var yBool:Boolean = _bounds.top < mouseY && mouseY < _bounds.bottom;
    //trace (" - xBool: " + xBool);
    //trace (" - yBool: " + yBool);
    return xBool && yBool;
}

Answer 3

You could set a default parameter for your mouse over handler, so you wouldn't need to create and dispatch a new event to run the same code.

e.g.

myBtn.addEventListener(MouseEvent.MOUSE_OVER, btnOverHandler);

function btnOverHandler(e:MouseEvent = null):void{
trace('do stuff on roll over!');
}

//then you can do this wherever you need
btnOverHandler();

it should work in both situation( MouseEvent, or not ).

and for the mouse over thing, getObjectsUnderPoint can be handy. It's more than what you need for this particular example(, and bit more lengthy) , but it's something good to be aware it exists.

e.g.

function isMouseOver(target:DisplayObject,container:DisplayObjectContainer):Boolean{
   var isOver:Boolean = false;
   var pt:Point = new Point(mouseX, mouseY);
   var objects:Array = container.getObjectsUnderPoint(pt);
   for(var i:int = 0 ; i < objects.length; i++){
      if(objects[i] == target) {
         isOver = true;
         break;
      }
   }
   return isOver;
}

Hope this helps.

Answer 4

You could alter the following properties when the UI is sliding down,

slidingUI.mousenabled = false
slidingUI.mousechildren = false

this would enable rollover events on the buttons underneath when the component is sliding. Be sure to reset the properties to true afterwards tho. Not sure if this is what your looking for but it could come in handy.