<div id="messageLog"></div> <div id="outerDiv" > <div id="innerDiv" onmouseout="showMsg('messageLog', 'Inner Div Mouse Out')" > </div> </div>
#outerDiv { width:250px; height:200px; margin:20px auto; padding:5px; background-color:#DEDEDE; } #innerDiv { width:60%; height:60%; margin:30px auto; padding:5px; background-color:#56AFAF; } p {margin:0; padding:0}
$ = function(id) { return document.getElementById(id); } showMsg = function(elem, msg) { $(elem).innerText = msg; } // Our generic code to handle the on mouse event isMouseLeave = function(event, parent) { // Get the reference to the event object if (!event) var e = window.event; // Get the target parent (extra code for cross browser compatability) e = event.toElement || event.relatedTarget; // Now keep traversing all the parents of the current target object to detect if the // object on which the mouse is being moved is child of the main parent element we are looking // for or not while (e && e.nodeName && e.nodeName != 'BODY') { // if this is a child element, ignore this on mouse out event if (e == parent) return false; // check the next parent e = e.parentNode; }; // If we are here, then this is actually the mouse out leave event, so do what you want to do return true; } // Generic event binder bindMouseOut = function(object, handler) { object.onmouseout = function(event) { // Call handler if this is mouse leave even if (isMouseLeave(event, object)) handler(); }; } bindMouseOut ($('outerDiv'), function(){ showMsg('messageLog', 'Out Div Mouse Out'); })