Code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>ie onmouseover 与onmouseout解析问题</title>
</head>
<body>
<pre>
1.this:指代触发事件的对象
2.fromElement:event.fromElement
3.toElement:event.toElement
IE的做法似乎是:
如果 (fromElement!=toElement) && (toElement ∈ this) 就触发onmouseover事件一次
如果 (fromElement!=toElement) && (fromElement ∈ this) 就触发onmouseout事件一次
见下例,鼠标在下图区移动,注意五个input里值的变化。
</pre>
<div id=span1 style="border: 10px solid red" onmouseover="ieMouseOver.value=ieMouseOver.value*1+1;if(!this.contains(event.fromElement)) ourMouseOver.value=ourMouseOver.value*1+1;" onmouseout="ieMouseOut.value=ieMouseOut.value*1+1;if(!this.contains(event.toElement)) ourMouseOut.value=ourMouseOut.value*1+1;"
onmousemove="ieMouseMove.value=ieMouseMove.value*1+1;"
>span1
<div style="background-color: #E0FFF0" style="border: 10px solid blue;" > span2
<div style="background-color: #E0FFF0" style="border: 10px solid yellow" > span3
</div>
span2
</div>
span1
</div>
ie mouseOver: <input id=ieMouseOver> <br/>
ie mouseOut: <input id=ieMouseOut> <br/>
mouseMove: <input id=ieMouseMove> <br/>
our mouseOver: <input id=ourMouseOver> <br/>
our mouseOut: <input id=ourMouseOut> <br/>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>ie onmouseover 与onmouseout解析问题</title>
</head>
<body>
<pre>
1.this:指代触发事件的对象
2.fromElement:event.fromElement
3.toElement:event.toElement
IE的做法似乎是:
如果 (fromElement!=toElement) && (toElement ∈ this) 就触发onmouseover事件一次
如果 (fromElement!=toElement) && (fromElement ∈ this) 就触发onmouseout事件一次
见下例,鼠标在下图区移动,注意五个input里值的变化。
</pre>
<div id=span1 style="border: 10px solid red" onmouseover="ieMouseOver.value=ieMouseOver.value*1+1;if(!this.contains(event.fromElement)) ourMouseOver.value=ourMouseOver.value*1+1;" onmouseout="ieMouseOut.value=ieMouseOut.value*1+1;if(!this.contains(event.toElement)) ourMouseOut.value=ourMouseOut.value*1+1;"
onmousemove="ieMouseMove.value=ieMouseMove.value*1+1;"
>span1
<div style="background-color: #E0FFF0" style="border: 10px solid blue;" > span2
<div style="background-color: #E0FFF0" style="border: 10px solid yellow" > span3
</div>
span2
</div>
span1
</div>
ie mouseOver: <input id=ieMouseOver> <br/>
ie mouseOut: <input id=ieMouseOut> <br/>
mouseMove: <input id=ieMouseMove> <br/>
our mouseOver: <input id=ourMouseOver> <br/>
our mouseOut: <input id=ourMouseOut> <br/>
</body>
</html>