<div style= "width:300px; height:300px; border:1px solid red; " > <div id= "target" ><div><span> test </span></div></div></div>
<style type= "Text/css" > #target {width:200px; height:200px; background: #EEE;} #target div{width:150px; height:150px; border:1px solid Orange;} #target span{display:block; width:50px; height:50px; background:gray;} </style>
var target = document.getElementById (' target '), if (Target.addeventlistener) {Target.addeventlistener ("mouseout", Mouseouthander,false)}else if (target.attachevent) {target.attachevent ("onmouseout", Mouseouthander);} Else{target.onmouseout = Mouseouthander;} function Mouseouthander (e) {e = e | | Window.event;var target = e.target | | e.srcelement; Determines whether the element that is moved out of the mouse is the target element if (target.id!== ' target ') { return; } Determines whether the mouse is moved out of the element or moved to a child element var relatedtarget = E.relatedtarget | | e.toelement; while (relatedtarget!== target && relatedTarget.nodeName.toUpperCase ()!== ' BODY ') { relatedtarget = Relatedtarget.parentnode; } If equal, indicates that the mouse moves inside the element if (Relatedtarget = = = target) { return; } Execution requires action alert (' Mouse Out ');}
Execute the above code, the mouse moves in the specified area will not always pop up the warning box
Determines whether the mouse is in the specified area code