JS中子元素的oumouseover觸發父元素onmouseout -很像繼承

一、什麼叫事件對象？

• 能夠獲取事件對象的一系列屬性，在事件中寫一個參數，便可經過參數獲取。代碼以下（wrap是一個對象）：

wrap.onmouseover = function(e) {
 e = window.event || e;        // window.event是爲了兼容ie下獲取事件對象，而e爲標準瀏覽器直接獲取
 }

二、事件對象的相關對象

在觸發onmouseover及onmouseout時，一定會涉及到其它對象，如：onmouseover的相關對象，即爲哪一個對象進入的。onmouseout的相關對象即爲進入到哪一個對象。獲取方法以下（wrap是一個對象）：

wrap.onmouseover = function(e) {
     e = window.event || e;
     var s = e.fromElement || e.relatedTarget;    //e.fromElement爲IE下onmouseover獲取相關對象方法，relatedTarget爲標準瀏覽器下獲取方法
 }
 wrap.onmouseout = function(e) {
     e = window.event || e;
     var s = e.toElement || e.relatedTarget;        //e.toElementIE下onmouseout獲取相關對象方法，relatedTarget爲標準瀏覽器下獲取方法
 }

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

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

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

兼容寫法：

function contains (a,b) {
    if (a.contains(b)) {
        a.contains(b);
    }else{
        a.compareDocumentPosition(b);
    }
}

當觸發onmouseover時，多是從對象之外移入的，也有多是父級移入到子級，以及子級移出到父級，剛纔也說過，onmouseover的相關對象是獲取從哪一個對象進入的。若是是從外面的對象進入的，咱們就執行所需的代碼。若是是從父級移入到子級或是由子級移出到父級時，則直接跳過。

wrap.onmouseover = function(e) {
     e = window.event || e;
     var s = e.fromElement || e.relatedTarget;
     if (document.all) {    //判斷瀏覽器是否爲IE,若是存在document.all則爲IE
         if (!this.contains(s)) {    // 判斷調用onmouseover的對象(this)是否包含自身或子級，若是包含，則不執行
             console.log('IE will over');
        }    
     } else {    //標準瀏覽器下的方法
         var reg = this.compareDocumentPosition(s);
         if (!(reg == 20 || reg == 0)) {
             console.log('Browser will over');
         }
     }
 }

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

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

代碼以下：

wrap.onmouseout = function(e) {
     e = window.event || e;
     var s = e.toElement || e.relatedTarget;
     if(document.all) {
         if (!this.contains(s)) {
             console.log('IE will out');
        }
     } else {
         var reg = this.compareDocumentPosition(s);
         if (!(reg == 20 || reg == 0)) {
             console.log('Browser will out');
         }
     }
 }

問題獲得瞭解決。

以上有什麼不懂的能夠給我發消息，我會第一時間回覆的！