热门关键字:
jquery > jquery教程 > javascript > 关于mouseout和mouseleave之间的区别

关于mouseout和mouseleave之间的区别

2344
作者:管理员
发布时间:2012/8/27 2:27:36
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=66

 
关于mouseout和mouseleave之间的区别
 
在前端开发中,经常需要用到onMouseOut,onMouseLeave和onMouseOver,用于当鼠标移出一个层的时候,那个层隐藏,而onMouseLeave和onMouseOver仅有Ie支持,其它浏览器都不支持,而且onMouseOut会不断冒泡,也就是说当子元素离开的时候,也会触发本元素的onMouseOut事件
以下是它们几个之间的区别:

不论鼠标指针离开被选元素还是任何被选元素的子元素,都会触发 mouseout 事件。

只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。

 

兼容多种浏览器的解决办法:
使用onMouseOut事件,调用

var absXY  = function(pobj)
{
    var sTop=pobj.offsetTop;
 var sLeft=pobj.offsetLeft;
    while (pobj = pobj.offsetParent) {
  sTop += pobj.offsetTop;
  sLeft+=pobj.offsetLeft;
  }    
 return {
  x: sLeft,
  y: sTop
 };
};

var mousePosition = function(ev){
    if(ev.pageX || ev.pageY){
        return {x:ev.pageX, y:ev.pageY};
    }  
    return {
        x:ev.clientX + document.documentElement.scrollLeft,
        y:ev.clientY + document.documentElement.scrollTop
    };
};

 

function domouseout(e,el){
 var m = mousePosition(e); 
 var x = m.x,
 y = m.y; 
 var w = el.offsetWidth,
 h = el.offsetHeight;

 var pos = absXY(el);
 if(x>= (pos.x+w) || y>=(pos.y+h)
 || x<= pos.x || y <= pos.y
 ){
  hidden();
 }





如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:关于mouseout和mouseleave之间的区别
友荐云推荐