JS中子元素的oumouseover触发父元素onmouseout -很像继承

1、什么叫事件对象？

• 可以获取事件对象的一系列属性，在事件中写一个参数，即可通过参数获取。代码如下（wrap是一个对象）：

wrap.onmouseover = function(e) {
 e = window.event || e;        // window.event是为了兼容ie下获取事件对象，而e为标准浏览器直接获取
 }

2、事件对象的相关对象

在触发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为标准浏览器下获取方法
 }

3、判断一个元素是否包含另一个元素

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');
         }
     }
 }

问题得到了解决。

以上有什么不懂的可以给我发消息，我会第一时间回复的！

转载于:https://my.oschina.net/u/3341316/blog/856132