Just Mousin’ Around

When your mouse is over a component in a MixFrame page, a small trash-can button will appear so you can remove the component. Simple, eh?

Mouse interactions are easy to conceptualize and describe. When you put your mouse over X, Y happens. When you move it off of X, Z happens. However, the system powering these interactions is a little more complex.

There are actually two pairs of events you will run into: `mouseover`/`mouseout` and `mouseenter`/`mouseleave`. There a big difference between them that becomes apparent when elements are nested inside each other. See them in action:

mouseover & mouseout

mouseenter & mouseleave

If you use `mouseover`/`mouseout` on nested DOM elements you may get some weird results, because moving your mouse onto a child node will trigger a `mouseout` event, just as if you had moved the mouse completely off the bounding box.

If you use `mouseenter`/`mouseleave` on nested DOM elements, you may get some weird results too. The `mouseleave` event does not fire when you move the mouse onto a child element, even though you might expect it to.

This presented a problem for our little trash-can, causing it to disappear and even flicker at times. Because we wanted to detect (A) when the mouse moved onto a component from anywhere — even a child element — and (B) when the mouse moved out of a component’s bounding box entirely, we needed to use the `mouseover` and `mouseleave` events together. This is a little unexpected, but was exactly what we needed.