about onmouseout event

as follow codes:

<div id="outerBox" style="border:1px solid red;width:300;height:300" onmouseout开发者_JS百科="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 trigger alert('out') ?

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

hot to do this?

thanks all :)

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/

I found something here which looks as the function you need: http://codingrecipes.com/onmouseout-fix-on-nested-elements-javascript