关于onmouseover和onmouseout的bug
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于onmouseover和onmouseout的bug相关的知识，希望对你有一定的参考价值。
总结了一下关于使用onmouseover以及onmouseout会出现的bug 首先简单的布局： 简单写了一下样式，效果如下： js代码如下： 需要的效果是移入时alert(“移入")，移出时alert("移出"); 然而会产生一个bug，当鼠标从灰色移动到粉色区域，或者从粉色移动到灰色区域的时候，仍然会触发onmouseover和onmouseout 事件. 解决思路：判断来源，如果从盒子里面移动则不触发。 首先，要借助事件对象，对事件对象进行兼容处理： 事件对象中有一个属性fromElemen，获得来源，但是也存在兼容问题，只适用于高级浏览器，在chrome和ie里有relatedTarget属性 判断是是否在内部移动，是则直接return返回 最后js代码如下： 同理，onmoouseout的解决方法代码如下： 关于兼容问题，ev属于高级浏览器，event属于ie relatedTarget属于高级浏览器，fromElement和toElement属于chrome和ie 最后介绍一种简便方法，onmouseenter事件和onmouseleave事件以及可以解决以上问题，使用方法相同。 <div id="box">
<div>这是一个内容</div>
</div>
var oBox = document.getElementById("box");
oBox.onmouseover = function(){
alert(“移入");
}
oBox.onmouseout = function(){
alert("移出");
}
var oEvent = ev || event;
var oFrom = oEvent.fromElement || oEvent.relatedTarget
//判断是否包含
if(oFrom && oBox.contains(oFrom)){
return;
}
oBox.onmouseover = function(ev){
var oEvent = ev || event;//兼容处理
var oFrom = oEvent.fromElement || oEvent.relatedTarget;//兼容处理
//如果在里面则返回
if(oFrom && oBox.contains(oFrom)){
return;
}
alert("移入");
};
oBox.onmouseout = function(ev){
var oEvent = ev || event; //处理兼容
var oTo = oEvent.toElement || oEvent.relatedTarget; //处理兼容
//如果在里面则返回
if(oTo && oBox.contains(oTo)){
return;
}
alert("移出");
};