Question

As in the follow code:

<div id="outerBox" style="border:1px solid red;width:300;height:300" onmouseout="alert('out')">
<div id="innerBox" style="border:1px solid blue;width:50;height:50">inner</div>
</div>

Why when I move mouse on the "innerBox", it was triggering alert('out')?

I want mouse out "outerBox" to trigger alert('out') only, mouse on "innerBox" don’t trigger alert.

How to do this?

Answer 1

This is the standard behaviour for the mouseout and mouseover events. Internet Explorer actually one-ups the competition here (for a change), because it has proprietary events that provide the behaviour that you’re looking for; onmouseenter and onmouseleave. The major downside is that these events aren’t part of the standard and other browsers haven’t implemented them.

If you use jQuery, it has a nice cross-browser implementation with .mouseleave(). It’s a good idea to use a framework to handle cross-browser events for you anyway. It doesn’t have to be jQuery, but I’m not sure if the others have a mouseleave event.

If you’re not using jQuery or a framework that provides the simulated event, see http://ecmascript.stchur.com/2007/03/15/mouseenter-and-mouseleave-events-for-firefox-and-other-non-ie-browsers/