<!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>

Posted on 2010-08-25 10:00  古代  阅读(522)  评论(0编辑  收藏  举报