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

最新推荐文章于 2021-06-15 10:33:19 发布

weixin_34414650

最新推荐文章于 2021-06-15 10:33:19 发布

阅读量2.3k

点赞数

文章标签：游戏 javascript ViewUI

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>

weixin_34414650

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
mouseover和mouseout事件引发的BUG-解决方法

mouseover和mouseout引发的BUG原由当给一个元素添加mouseover或mouseout事件，这个元素还有子元素。由于子元素的事件冒泡，鼠标移入或移出子元素都会触发事件。解决的方法：根据event对象判断是否为子元素JQuery解决方法JQuery可以用mouseenter代替mouseover，mouseleave代替mouseout。还可以用hover(...
复制链接

扫一扫