JS中子元素的oumouseover触发父元素onmouseout -很像继承
1、什么叫事件对象?
可以获取事件对象的一系列属性,在事件中写一个参数,即可通过参数获取。代码如下(wrap是一个对象):
1 wrap.onmouseover = function(e) { 2 e = window.event || e; // window.event是为了兼容ie下获取事件对象,而e为标准浏览器直接获取 3 }
2、事件对象的相关对象
在触发onmouseover及onmouseout时,必定会涉及到其它对象,如:onmouseover的相关对象,即为哪个对象进入的。onmouseout的相关对象即为进入到哪个对象。获取方法如下(wrap是一个对象):
1 wrap.onmouseover = function(e) { 2 e = window.event || e; 3 var s = e.fromElement || e.relatedTarget; //e.fromElement为IE下onmouseover获取相关对象方法,relatedTarget为标准浏览器下获取方法 4 } 5 wrap.onmouseout = function(e) { 6 e = window.event || e; 7 var s = e.toElement || e.relatedTarget; //e.toElementIE下onmouseout获取相关对象方法,relatedTarget为标准浏览器下获取方法 8 }
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'); } } }
问题得到了解决。
以上有什么不懂的可以给我发消息,我会第一时间回复的!