在发生mouseover和mouseout事件时,还会涉及更多的元素。这两个事件都会涉及把鼠标指针从一个元素的边界之内移到另一个元素边界之内。对mouseover事件而言,事件的主目标是获得光标的元素,而相关元素就是那个失去光标的元素。类似地,对mouseout事件而言,事件的主目标是失去光标的元素,而相关元素则是获得光标的元素。
DOM通过event对象的relatedTarget属性提供了相关元素的信息。这个属性只对于mouseover和mouseout事件才包含值;对于其他事件,这个属性的值是null。IE不支持realtedTarget属性,但提供了保存着同样信息的不同属性。在mouseover事件触发时,IE的fromElement属性中保存了相关元素;在mouseout事件出发时,IE的toElement属性中保存着相关元素。
以下是我封装的一个兼容格式:
function enterAndLeave(ev,obj){ var E = ev || window.event; //获取event if(E.type != 'mouseover' && E.type != 'mouseout'){
return flase; }
//判断当前事件是否是mouseover并且是否是mouseout如果不是的话则退出,因为只有over和out才支持relatedTarget var theTarget = null; if(E.relatedTarget){ theTarget = E.relatedTarget; }else{ if(E.type == 'mouseover'){ thisTarget = E.toElement; }else{ thisTarget = E.fromElement; } }
//做各浏览器的兼容模式获取当前移入或移除的时间对象 while(theTarget && theTarget != obj){ theTarget = theTarget.parentNode; }
//当满足存在当前事件对象并且当前事件对象与传进来的对象不相等时执行theTarget赋值为当前对象的父层对象 return (theTarget != obj);
//最后return 当前对象是否与传入对象相等 不相等则返回false }
如何使用:
对象.onmouseout = function(ev){ if(enterAndLeave(ev,this)){ 执行的函数 }else{ return false; } }
//只有当enterAndLeave为true也就是兼容版函数中当前对象与传入对象不相等时