Question

I have a component called X. I’m trying to make a menu come down from it when I put my mouse over it.

I have a mouseOver handler which changes the component’s state to another state which shows an extra child component (the menu) on the lower part. This of course makes the X component grow.

I also have mouseOut event handler which makes the menu disappear by returning component X to its original state.

When I move the mouse over the component the menu appears as expected. But when I move the mouse down to the menu that is now visible, as soon as I touch it, it disappears. This way it’s impossible to reach the menu.

I guess the mouseOut event is triggered as soon as I move out of the old boundaries. Is this so? And how can I avoid it? The new boundaries should now consider the extra child with the menu.

Thanks in advance,
Nuno

Answer 1

When you move over the child element you are mousing out of compo0nent “X”.
Without seeing code I can’t really help you. However you might want to try a few things.

• Make a function that tests hit area
  of the mouse and component and only
  dispatch the event if it passes a
  mouse out only if it isn’t over your
  component. Your component shouldn’t dispatch a mouse out event just because the mouse moved out of the component
• Change your listeners as needed
• Event propagation

  But really there is no way I can help more without code.