javascript
JS子元素oumouseover触发父元素onmouseout
JavaScript中，父元素包含子元素：
當父級設(shè)置onmouseover及onmouseout時，鼠標從父級移入子級，則觸發(fā)父級的onmouseout后又觸發(fā)onmouseover；從子級移入父級后再次觸發(fā)父級的oumouseout后又觸發(fā)onmouseover。而如果onmouseover內(nèi)又應(yīng)用了計時器便會存在較大的問題。下面針對此問題給出解決方案。
首先，在給出解決方案之前，必須先弄清楚幾個對象及方法，分別如下：
1、事件對象
2、事件對象相關(guān)屬性（只針對onmouseover及onmouseout），即fromElement、toElement、relatedTarget
3、判斷一個元素是否包含另一個元素的方法，即element.contains(Node)與element.compareDocumentPosition(Node)
既然前面已經(jīng)說了要弄清如上幾個對象及方法，那么，我們就可以分析一下倒底如何去解決這個問題。
分析：
存在的問題是設(shè)置onmouseover時，鼠標從移入父級內(nèi)時，沒任何問題，但由父級移入子級時，以及由子級稱出到父級時會出現(xiàn)如上問題，那么我們可以想辦法設(shè)置當鼠標從父級移入到子級時，或從子級移出到父級時讓觸發(fā)對象失效，我們可以通過if語句進行判斷。而事件對象里面有個屬性可以獲取移入移出時的相關(guān)對象，下面就來介紹。
1、事件對象：可以獲取事件對象的一系列屬性，在事件中寫一個參數(shù)，即可通過參數(shù)獲取，方法如下：
1 wrap.onmouseover = function(e) { 2 e = window.event || e; // window.event是為了兼容ie下獲取事件對象，而e為標準瀏覽器直接獲取 3 } 2、事件對象的相關(guān)對象
在觸發(fā)onmouseover及onmouseout時，必定會涉及到其它對象，如：onmouseover的相關(guān)對象，即為哪個對象進入的。onmouseout的相關(guān)對象即為進入到哪個對象。獲取方法如下：
3、判斷一個元素是否包含另一個元素
IE下可以使用a.contains(b)判斷a是否包含b
標準瀏覽器下a.compareDocumentPosition(b)有5個值，若為0表示為同一節(jié)點，若為2表示a位于b后面，若為4表示a位于b前面，若為10表示a為b的后代，若為20表示a為b的祖級。
先上個即將用到的示例的HTML及CSS
既然知道了以上的獲取屬性及事件的必備方法，那么我們就可以想方法解決問題了
當觸發(fā)onmouseover時，可能是從對象以外移入的，也有可能是父級移入到子級，以及子級移出到父級，剛才也說過，onmouseover的相關(guān)對象是獲取從哪個對象進入的。如果是從外面的對象進入的，我們就執(zhí)行所需的代碼。如果是從父級移入到子級或是由子級移出到父級時，則直接跳過。
父級移入到子級對象，相關(guān)對象為父級。 子級移出到父級對象，相對對象為子級。
代碼如下：
當觸發(fā)onmouseout時，可能是從父級移到子級，也可能由子級移到父級，或是移出至父級之外。
父級稱到子級，則相關(guān)對象為子級，子級稱到父級，則相關(guān)對象為父級。
代碼如下：
問題也就得到了解決。
不過你會發(fā)現(xiàn)：onmouseover與onmouseout的判斷方法其實是一樣的。于是我們得到：
無論是移入還是移出，只要相關(guān)對象是父級以外的就可以執(zhí)行，否則代碼不執(zhí)行。
最后，再為大家提供本人自己寫的兼容代碼，復制到JS代碼后可直接調(diào)用。代碼如下：
1 /* 2 * 功能：鼠標移入對象觸發(fā)事件，兼容所有瀏覽器并防止鼠標在父子對象間移動造成的觸發(fā)onmouseover的bug 3 * 參數(shù)：第一個參數(shù)表示觸發(fā)的對象，第二個參數(shù)表示觸發(fā)的對象的事件對象，第三個對象表示要執(zhí)行的函數(shù) 4 * 作者：http://www.cnblogs.com/wuyuchang/ 5 */ 6 function mouseover(a, e, func) { 7 e = e || window.event; 8 var b = e.fromElement || e.relatedTarget; 9 10 mouseoverAndOut(a, b, func); 11 } 12 /* 13 * 功能：鼠標移出對象觸發(fā)事件，兼容所有瀏覽器并防止鼠標在父子對象間移動造成的onmouseout的bug 14 * 參數(shù)：第一個參數(shù)表示觸發(fā)的對象，第二個參數(shù)表示觸發(fā)的對象的事件對象，第三個對象表示要執(zhí)行的函數(shù) 15 * 作者：http://www.cnblogs.com/wuyuchang/ 16 */ 17 function mouseout(a ,e, func) { 18 e = e || window.event; 19 var b = e.toElement || e.relatedTarget; 20 mouseoverAndOut(a, b, func); 21 } 22 /* 23 * 功能：鼠標移入或移出對象觸發(fā)事件，兼容所有瀏覽器并防止鼠標在父子對象間移動造成的onmouseover & onmouseout的bug 24 * 參數(shù)：第一個參數(shù)表示觸發(fā)的對象，第二個參數(shù)表示觸發(fā)的對象的事件對象，第三個對象表示要執(zhí)行的函數(shù) 25 * 作者：http://www.cnblogs.com/wuyuchang/ 26 */ 27 function mouseoverOrOut(a, e, func) { 28 e = e || window.event; 29 var b; 30 if (e.type == 'mouseover') { 31 b = e.fromElement || e.relatedTarget; 32 } else if (e.type == 'mouseout') { 33 b = e.toElement || e.relatedTarget; 34 } 35 mouseoverAndOut(a, e, func); 36 } 37 /* 38 * 功能：鼠標移入或移出對象觸發(fā)事件，兼容所有瀏覽器并防止鼠標在父子對象間移動造成的onmouseover & onmouseout的bug 39 * 參數(shù)：第一個參數(shù)表示觸發(fā)的對象，第二個參數(shù)表示觸發(fā)的對象的相關(guān)對象，第三個對象表示要執(zhí)行的函數(shù) 40 * 作者：http://www.cnblogs.com/wuyuchang/ 41 */ 42 function mouseoverAndOut(a, b, func) { 43 if (document.all) { 44 if (!(a.contains(b))) { 45 func(); 46 } 47 } else { 48 var res = a.compareDocumentPosition(b); 49 if(!(res == 20 || res == 0)){ 50 func(); 51 } 52 } 53 }（如果是onmouseover，調(diào)用mouseover(a, e, func)即可；如果是onmouseout，調(diào)用mouseout(a, e, func)即可；或不管onmouseover還是onmouseout直接調(diào)用mouseoverOrOut(a, e, func)即可。）
以上為個人經(jīng)驗之談，如有不到之處還請留言指點。
總結(jié)
以上是生活随笔為你收集整理的JS子元素oumouseover触发父元素onmouseout的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 记录hadoop3.2.2出现Could
- 下一篇： ProgressBar 各种样式