Roll over and roll out on buttons

Question

I have two buttons in my flex app next to each other, ButtonA and ButtonB. When the user does a mouse roll-over on any of the two buttons, I want the roll-over skin (overSkin) to show on both buttons, i.e. Button A and Button B. I tried to do it using this when user rolled over Button B:

ButtonA.dispatchEvent(new MouseEvent(MouseEvent.ROLL_OVER));

and then when the user rolled out of Button B I do:

ButtonA.dispatchEvent(new MouseEvent(MouseEvent.ROLL_OUT));

Button I cannot do the same on Button A when the user rolls in/out. It causes an infinite loop resulting in stack overflow.

Is there any other way to do this?

Answer 1

Control the recursion explicitly with an extra variable. For rollover in button A:

if(!rolledIntoButtons) {
  rolledIntoButtons = true
  ButtonB.dispatchEvent(new MouseEvent(MouseEvent.ROLL_OVER))
}

...with the same thing backwards in button B. Then on rollout in button A:

if(rolledIntoButtons) {
    rolledIntoButtons = false
  ButtonB.dispatchEvent(new MouseEvent(MouseEvent.ROLL_OUT))
}

Also, check the documentation on those buttons; you might be able to avoid introducing an extra variable by checking the rollover state of the buttons directly.