mouseover和mouseout事件引发的BUG-解决方法

mouseover和mouseout引发的BUG原由

当给一个元素添加mouseover或mouseout事件,这个元素还有子元素。

由于子元素的事件冒泡,鼠标移入或移出子元素都会触发事件。

解决的方法:根据event对象判断是否为子元素

JQuery解决方法

JQuery可以用mouseenter代替mouseover,mouseleave代替mouseout。

还可以用hover()方法。

JavaScript原生解决方法

原生的方法解决就需要了解一下relatedTarget、fromElement、toElement这三个event返回的对象。

relatedTarget是w3c标准的ie没有/fromElement在ie时mouseover使用/toElement在ie时mouseout上使用

写一下简单的思路:

鼠标移入的时候判断一下:移入的元素既不是本身,也不是元素的子节点,然后触发事件。

 

写了两个方法:

relatedTarget()  //返回相关元素的节点

checkFather(obj,relatedTarget)  //判断移入的元素既不是本身 也不是元素的子节点

 

在发个示例:

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>box</title>
<style>
    #box{position: absolute;top:20px;left:45px;background-color: red;width: 400px;height: 400px;}
    #box p{background-color: #000;color: #fff;}
    #box p span{background-color: #fff;color: #000;}
</style>
</head>
<body>

<div id="box">
    <p>g.com.cn/touch/js/jquery-1.8.3.mispan <span>spanspan</span> ng.com.cn/touch/js/jquery-1.8.3.ming.com.cn/touch/js/jquery-1.8.3.min</p>
    <p>g.com.cn/touch/js/jquery-1.8.3.ming.com.cn/touch/js/jquery-1.8.3.ming.com.cn/touch/js/jquery-1.8.3.min</p>
</div>


<script>
document.getElementById('box').onmouseover = function(event){
    var event = event || window.event;
    if(checkFather(this, relatedTarget(event,'mouseover'))){
        alert('mouseover');
    }
}
document.getElementById('box').onmouseout = function(event){
    var event = event || window.event;
    if(checkFather(this, relatedTarget(event,'mouseout'))){
        alert('onmouseout');
    }
}

/*
    返回相关元素的节点
    event,'mouseover' or 'mouseout'
*/
function relatedTarget(event,method){
    if(arguments.length<2) throw new Error('relatedTarget()缺少参数');
    if(event.relatedTarget) return event.relatedTarget;
    
    if(method == 'mouseover'){
        return event.fromElement;
    }else if(method == 'mouseout'){
        return event.toElement;
    }else{
        throw new Error('relatedTarget(method)错误');
    }
}

//判断移入的元素既不是本身 也不是元素的子节点
function checkFather(obj,relatedTarget){
     return obj!=relatedTarget && !obj.contains(relatedTarget);
}
</script>

</body>
</html>

 

你可能感兴趣的:(mouseover)