JS子元素oumouseover觸發父元素onmouseout

　　JavaScript中，父元素包含子元素：

　　當父級設定onmouseover及onmouseout時，滑鼠從父級移入子級，則觸發父級的onmouseout後又觸發onmouseover；從子級移入父級後再次觸發父級的oumouseout後又觸發onmouseover。而如果onmouseover内又應用了計時器便會存在較大的問題。下面針對此問題給出解決方案。

　　首先，在給出解決方案之前，必須先弄清楚幾個對象及方法，分别如下：

　　1、事件對象

　　2、事件對象相關屬性（隻針對onmouseover及onmouseout），即fromElement、toElement、relatedTarget

　　3、判斷一個元素是否包含另一個元素的方法，即element.contains(Node)與element.compareDocumentPosition(Node)

　　既然前面已經說了要弄清如上幾個對象及方法，那麼，我們就可以分析一下倒底如何去解決這個問題。

分析：

　　存在的問題是設定onmouseover時，滑鼠從移入父級内時，沒任何問題，但由父級移入子級時，以及由子級稱出到父級時會出現如上問題，那麼我們可以想辦法設定當滑鼠從父級移入到子級時，或從子級移出到父級時讓觸發對象失效，我們可以通過if語句進行判斷。而事件對象裡面有個屬性可以擷取移入移出時的相關對象，下面就來介紹。

　　1、事件對象：可以擷取事件對象的一系列屬性，在事件中寫一個參數，即可通過參數擷取，方法如下：

　　2、事件對象的相關對象

在觸發onmouseover及onmouseout時，必定會涉及到其它對象，如：onmouseover的相關對象，即為哪個對象進入的。onmouseout的相關對象即為進入到哪個對象。擷取方法如下：

　　3、判斷一個元素是否包含另一個元素

IE下可以使用a.contains(b)判斷a是否包含b

标準浏覽器下a.compareDocumentPosition(b)有5個值，若為0表示為同一節點，若為2表示a位于b後面，若為4表示a位于b前面，若為10表示a為b的後代，若為20表示a為b的祖級。

　　先上個即将用到的示例的HTML及CSS

　　既然知道了以上的擷取屬性及事件的必備方法，那麼我們就可以想方法解決問題了

當觸發onmouseover時，可能是從對象以外移入的，也有可能是父級移入到子級，以及子級移出到父級，剛才也說過，onmouseover的相關對象是擷取從哪個對象進入的。如果是從外面的對象進入的，我們就執行所需的代碼。如果是從父級移入到子級或是由子級移出到父級時，則直接跳過。

父級移入到子級對象，相關對象為父級。 子級移出到父級對象，相對對象為子級。

代碼如下：

　　當觸發onmouseout時，可能是從父級移到子級，也可能由子級移到父級，或是移出至父級之外。

父級稱到子級，則相關對象為子級，子級稱到父級，則相關對象為父級。

問題也就得到了解決。

不過你會發現：onmouseover與onmouseout的判斷方法其實是一樣的。于是我們得到：

無論是移入還是移出，隻要相關對象是父級以外的就可以執行，否則代碼不執行。

最後，再為大家提供本人自己寫的相容代碼，複制到JS代碼後可直接調用。代碼如下：

（如果是onmouseover，調用mouseover(a, e, func)即可；如果是onmouseout，調用mouseout(a, e, func)即可；或不管onmouseover還是onmouseout直接調用mouseoverOrOut(a, e, func)即可。）

以上為個人經驗之談，如有不到之處還請留言指點。