惊天大发现！javascript的onmouseout失灵了！！

我有一个表格，在table上加了一个js，当鼠标移开表格的时候触发一个js方法。
表格里内容，包括文字图片div。
发现，鼠标移到文字上面，不会触发onmouseout，但是移到图片和div上面，发现能触发onmouseout，也就是说 我鼠标其实还在表格里的，只是我鼠标移动到了表格里面的图片上而已。下面是代码，大家先复制起来运行下，然后看看我的问题<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> new document </title>
<meta name="keywords" content="" />
<meta name="description" content="" />
</head><body>
<style type="text/css">
#asdad{color:red;position:absolute;left:0px;top:50px;}
</style>
<script language="JavaScript">
<!--function doMouseOut()
{
document.getElementById("msg").innerHTML+="鼠标移出！"; document.getElementById("mytable").style.left=parseInt(document.getElementById("mytable").style.left)+10+"px";
}
//-->
</script>
<div id="msg"></div><table id="mytable" bgcolor="#FF66CC" border="10" bordercolor="#660066" cellpadding="10" cellspacing="0"  onmouseout="javascript:doMouseOut();">
<tr><td>
<div style="width:100px;height:20px;background-color:#FF3366;">div</div>
asdad<img src="http://hiphotos.baidu.com/89263824/pic/item/8b3a9b08dbdc7999d1581be5.jpg">
</td>
</tr>
</table>
<script language="JavaScript">
<!--
document.getElementById("mytable").style.left="0px";//-->
</script></body>
</html>我的问题是：如果我要实现 我本意想实现的功能，怎么解决。就是 只要我鼠标还在表格内，就不要触发onmouseout。

解决方案 »

  1.   

    鼠标移到子控件的时候，会触发子控件的mouseover!当然就会触发父控件的mouseout!!你需要在父控件的mouseout 中判断是否是子控件触发的！是子控件触发的，不作响应！<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title> new document </title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
    </head><body>
    <style type="text/css">
        #asdad{color:red;position:absolute;left:0px;top:50px;}
    </style>
    <script language="JavaScript">
    <!--
    //在IE环境下添加 对象的contains 函数
    if(typeof(HTMLElement) != "undefined") { HTMLElement.prototype.contains = function(obj) {             while(obj != null &&  typeof(obj.tagName) != "undefined")             { if(obj == this) return true; obj = obj.parentNode; }    return false;   };   } function doMouseOut(e)
    {
    e=e||event;
    var s = e.toElement || e.relatedTarget ;
    if(this.contains(s)){return;} // 是子控件触发的不执行
        document.getElementById("msg").innerHTML+="鼠标移出！";    document.getElementById("mytable").style.left=parseInt(document.getElementById("mytable").style.left)+10+"px";
    }
    //-->
    </script>
    <div id="msg"></div><table id="mytable" bgcolor="#FF66CC" border="10" bordercolor="#660066" cellpadding="10" cellspacing="0"  onmouseout="javascript:doMouseOut(event);">
    <tr><td>
        <div style="width:100px;height:20px;background-color:#FF3366;">div</div>
        asdad<img src="http://hiphotos.baidu.com/89263824/pic/item/8b3a9b08dbdc7999d1581be5.jpg">
    </td>
    </tr>
    </table>
    <script language="JavaScript">
    <!--
        document.getElementById("mytable").style.left="0px";//-->
    </script></body>
    </html>
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title> new document </title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
    </head><body>
    <style type="text/css">
        #asdad{color:red;position:absolute;left:0px;top:50px;}
    </style>
    <script language="JavaScript">
    <!--
    //在IE环境下添加 对象的contains 函数
    if(typeof(HTMLElement) != "undefined") { HTMLElement.prototype.contains = function(obj) {             while(obj != null &&  typeof(obj.tagName) != "undefined")             { if(obj == this) return true; obj = obj.parentNode; }    return false;   };   } function doMouseOut(e)
    {
    e=e||event;
    var s = e.toElement || e.relatedTarget ;
    if(this.contains(s)){return;} // 是子控件触发的不执行
        document.getElementById("msg").innerHTML+="鼠标移出！";    document.getElementById("mytable").style.left=parseInt(document.getElementById("mytable").style.left)+10+"px";
    }
    //-->
    </script>
    <div id="msg"></div><table id="mytable" bgcolor="#FF66CC" border="10" bordercolor="#660066" cellpadding="10" cellspacing="0"  onmouseout="javascript:doMouseOut(event);">
    <tr><td>
        <div style="width:100px;height:20px;background-color:#FF3366;">div</div>
        asdad<img src="http://hiphotos.baidu.com/89263824/pic/item/8b3a9b08dbdc7999d1581be5.jpg">
    </td>
    </tr>
    </table>
    <script language="JavaScript">
    <!--
        document.getElementById("mytable").style.left="0px";//-->
    </script></body>
    </html>
      

  3.   

    function doMouseOut(e)
    {
    e=e||event;
    var s = e.toElement || e.relatedTarget ;
    if(this.contains(s)){return;} // 是子控件触发的不执行
      document.getElementById("msg").innerHTML+="鼠标移出！";  document.getElementById("mytable").style.left=parseInt(document.getElementById("mytable").style.left)+10+"px";
    }
      

  4.   

    contains  这个是关键！ 谢谢