如何捕捉到整个table区域的onmouseout事件！

<html>
<head>
<script language=javascript>
<!--
function doMouseOut(){
msgDiv.innerText += event.srcElement.tagName+", ";
}
</script></head>
<body>
<table style="border:solid 1px red" cellspacing=20 onmouseout="doMouseOut();">
<tbody onmouseout="event.cancelBubble=true;">
<tr><td style="border:solid 1px yellow;padding:20 20 20 20"><div style="border:solid 1px blue">div</div> td</td></tr>
</tbody>
</table>
<div id=msgDiv></div>
</body>
</html>

解决方案 »

  1.   

    真TMD FT，有没有不用隔离带cellspacing的方法，比如直接能把table或者其他的父元素当作一个实体！
      

  2.   

    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>JK:支持民族工业,尽量少买X货</title>
    </head><body >
    <pre>关于mouseover 和 mouseout，JK的理解是：1.this:指代触发事件的对象
    2.fromElement:event.fromElement
    3.toElement:event.toElementIE的做法似乎是：
    如果 (fromElement!=toElement) &amp;&amp; (toElement ∈ this)  就触发onmouseover事件一次
    如果 (fromElement!=toElement) &amp;&amp; (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;" > &nbsp;span2&nbsp;
     <div style="background-color: #E0FFF0" style="border: 10px solid yellow" > &nbsp;span3&nbsp;
     </div>
     &nbsp;span2&nbsp;
     </div>
     &nbsp;span1&nbsp;
     </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>