现在的位置: 首页 > 综合 > 正文

onmouseout,mouseover经过子元素也触发的问题解决方案

2012年02月21日 ⁄ 综合 ⁄ 共 1206字 ⁄ 字号 评论关闭

在mouseout与mouseover的冒泡问题上,相信有很多朋友都遇到过。今天这里就总结一下关于mouseover和mouseout冒泡问题的解决方案:   首先,看下event.relatedTarget的用法。 relatedTarget 事件属性返回与事件的目标节点相关的节点。 relatedTarget不支持IE。 对于 mouseover 事件来说,该属性是鼠标指针移到目标节点上时所离开的那个节点。 对于 mouseout 事件来说,该属性是离开目标时,鼠标指针进入的节点。 对于其他类型的事件来说,这个属性没有用。
    html代码: Html代码  <div id='but_temp'><a href='#'>这里是文字</a>       <div>第二方收复失地还 <br>sdfsjdlfsdjlfksdjlfksjdflk       <br>       <div>第三层第三层第三层第三层第三层第三层<br>       第三层第三层第三层第三层第三层第三层第三层</div>       <br>       </div>   </div>     js代码: Js代码  

< script type = "text/javascript" >
var d1 = document.getElementById('but_temp');
d1.onmouseover = mouseover_x;
d1.onmouseout = mouseout_x;
function mouseover_x(ae) {
    var e = window.event || ae;
    var s = e.fromElement || e.relatedTarget;
    if (document.all) {
        if (! (s == this || this.contains(s))) {
            alert("IE: 你 in 了 !");
        }
    } else {
        var res = this.compareDocumentPosition(s);
        if (! (s == this || res == 20 || res == 0)) {
            alert("FF: 你 in 了 !");
        }
    }
}
function mouseout_x(ae) {
    var e = window.event || ae;
    var s = e.toElement || e.relatedTarget;

   if(document.all){                  

    if( !this.contains(s) ){                      alert('IE: 你 out 了');                  }              }else{                  var res= this.compareDocumentPosition(s) ;                    if( ! ( res == 20 || res == 0) ){                         alert('FF:
你 out 了');                  }                }     }   </script>    
    

抱歉!评论已关闭.