<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 模拟兼容onmouseleave,onmouseenter </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<style>
h2{BORDER-top:5px solid black;}
</style>
<script>
function isMouseLeaveOrEnter(e, handler) {
if (e.type != 'mouseout' && e.type != 'mouseover') return false;
var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;
while (reltg && reltg != handler)
reltg = reltg.parentNode;
return (reltg != handler);
}
</script>
<h2>onmouseout onmouseover</h2><br>
<div style="border: 1px solid black; width: 350px;"
onmouseout="var out = document.getElementById('out'); out.value = parseInt(out.value) + 1;"
onmouseover="var over = document.getElementById('over'); over.value = parseInt(over.value) + 1;">
Try moving the mouse in and out of this div
<div style="background: #efe; margin: 20px; width: 160px; border: 5px solid black;">and the nested div</div>
</div>
<p>
mouseovers <input id="over" value="0">
mouseouts <input id="out" value="0"><br>
</p>
<h2>兼容的 onmouseleave onmouseenter</h2><br>
<div style="border: 1px solid black; width: 350px;"
onmouseout="var leave = document.getElementById('leave'); if (isMouseLeaveOrEnter(event, this)) leave.value = parseInt(leave.value) + 1;"
onmouseover="var enter = document.getElementById('enter'); if (isMouseLeaveOrEnter(event, this)) enter.value = parseInt(enter.value) + 1;"
>
Try moving the mouse in and out of this div
<div style="background: #efe; margin: 20px; width: 160px; border: 5px solid black;">and the nested div</div>
</div>
<p>
mouseenters <input id="enter" value="0">
mouseleaves <input id="leave" value="0"><br>
</p>
<h2>仅IE onmouseleave onmouseenter</h2><br>
<div style="border: 1px solid black; width: 350px;"
onmouseleave="var leave = document.getElementById('ieleave'); leave.value = parseInt(ieleave.value) + 1;"
onmouseenter="var enter = document.getElementById('ieenter'); enter.value = parseInt(ieenter.value) + 1;">
Try moving the mouse in and out of this div
<div style="background: #efe; margin: 20px; width: 160px; border: 5px solid black;">and the nested div</div>
</div>
<p>
only ie mouseenters <input id="ieenter" value="0">
only ie mouseleaves <input id="ieleave" value="0"><br>
</p>
</BODY>
</HTML>
