在Javascript中，父元素包含子元素，當給父元素設置onmouseover或onmouseout事件時，鼠標從父級移入子級的時候會多次觸發onmouseover事件；鼠標從子級移入父級后再次移出的時候也會多次觸發onmouseout事件。所以這個問題要解決，不然在以后的事例中出現很大的問題。
下面我們首先要熟悉幾個對象與方法：
1）事件對象：
2）事件對象相關屬性(只針對onmouseover與onmouseout):
標簽源：oEvent.fromElement(從哪里來的元素)：兼容IE,Chrome
oEvent.toElement(去哪里的元素)：兼容IE,Chrome
oEvent.relateTarget(相關元素)：兼容FF
3）判斷一個元素是不是包含在另一個元素中的方法：元素.contains(Node)
了解了上面的方法后，開始解決上面的問題：當onmouseover時，鼠標移過父級元素的時候，不會有任何的問題，當從父級移入子級的時候就會出現問題；同樣當onmouseout時，鼠標從父級移出的時候也沒有問題，但從子級往父級移動的時候就會多次觸發onmouseout事件，我們解決的方法就是設置當從父級移入子級的時候或是從子級往父級移動的時候這個事件無效。
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>onmouseover的bug</title> <style> div{ width:200px; height:200px; background:#ccc; margin:40px auto; } h3{ height:30px; background:yellow; } </style> <script> window.onload=function(){ var oDiv=document.getElementsByTagName('div')[0]; oDiv.onmouseover=function(ev){ var oEvent=ev||event; var oFrom=oEvent.fromElement||oEvent.relatedTarget; //其中oEvent.fromElement兼容IE，chrome //oEvent.relatedTarget;兼容FF。 if(this.contains(oFrom)) return; //判斷div是不是包含oFrom,如果包含就返回 alert('移入了'); }; }; </script> </head> <body> <div> <h3></h3> </div> </body>
同樣的鼠標移出事件onmouseout時，可以寫成下面這種：
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>onmouseout的bug</title> <style> div{ width:200px; height:200px; background:#ccc; margin:40px auto; } h3{ height:30px; background:yellow; } </style> <script> window.onload=function(){ var oDiv=document.getElementsByTagName('div')[0]; oDiv.onmouseout=function(ev){ var oEvent=ev||event; var oTo=oEvent.toElement||oEvent.relatedTarget; //其中oEvent.toElement兼容IE，chrome //oEvent.relatedTarget;兼容FF。 if(this.contains(oTo)) return; //判斷div是不是包含oTo,如果包含就返回 alert('移出了'); }; }; </script> </head> <body> <div> <h3></h3> </div> </body>
其實我們還可以使用onmouseenter與onmouseleave事件來代替onmouseover與onmouseout事件，網上查了一下說onmouseenter與onmouseleave事件不穩定，而且有的時候只兼容IE內核的瀏覽器，我現在試了一個兼容性很是很好的，可以嘗試使用噢！