关于onmouseover和onmouseout的bug

Posted 7qin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于onmouseover和onmouseout的bug相关的知识,希望对你有一定的参考价值。

总结了一下关于使用onmouseover以及onmouseout会出现的bug

首先简单的布局:

<div id="box">
    <div>这是一个内容</div>
</div>

简单写了一下样式,效果如下:

技术图片

js代码如下:

技术图片
var oBox = document.getElementById("box");
oBox.onmouseover = function(){
    alert(“移入");
}
oBox.onmouseout = function(){
    alert("移出");
}
技术图片

需要的效果是移入时alert(“移入"),移出时alert("移出");

然而会产生一个bug,当鼠标从灰色移动到粉色区域,或者从粉色移动到灰色区域的时候,仍然会触发onmouseoveronmouseout 事件.

解决思路:判断来源,如果从盒子里面移动则不触发。

首先,要借助事件对象,对事件对象进行兼容处理:

var oEvent = ev || event;

事件对象中有一个属性fromElemen,获得来源,但是也存在兼容问题,只适用于高级浏览器,在chrome和ie里有relatedTarget属性

var oFrom = oEvent.fromElement || oEvent.relatedTarget

判断是是否在内部移动,是则直接return返回

//判断是否包含
if(oFrom && oBox.contains(oFrom)){
    return;    
}

最后js代码如下:

技术图片
oBox.onmouseover = function(ev){
    var oEvent = ev || event;//兼容处理
    var oFrom = oEvent.fromElement || oEvent.relatedTarget;//兼容处理
    //如果在里面则返回
    if(oFrom && oBox.contains(oFrom)){
        return;    
    }
    alert("移入");    
};
技术图片

同理,onmoouseout的解决方法代码如下:

技术图片
oBox.onmouseout = function(ev){
    var oEvent = ev || event; //处理兼容
    var oTo = oEvent.toElement || oEvent.relatedTarget; //处理兼容
    //如果在里面则返回
    if(oTo && oBox.contains(oTo)){
        return;
    }
    alert("移出");    
};
技术图片

关于兼容问题,ev属于高级浏览器,event属于ie

         relatedTarget属于高级浏览器,fromElement和toElement属于chrome和ie

最后介绍一种简便方法,onmouseenter事件和onmouseleave事件以及可以解决以上问题,使用方法相同。

 

以上是关于关于onmouseover和onmouseout的bug的主要内容,如果未能解决你的问题,请参考以下文章

在 onmouseover 和 onmouseout 上更新 Canvas 内容

onmouseenter,onmouseleave,onmouseover,onmouseout的区别

onmouseenter,onmouseleave,onmouseover,onmouseout的区别

onmouseover/onmouseout的小意外

href 链接不适用于带有“onmouseover 更改文本”和 onmouseout 的 innerHTML 脚本

Reactjs onMouseOver 和 onMouseOut 事件循环在尝试 Popover