关于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，当鼠标从灰色移动到粉色区域，或者从粉色移动到灰色区域的时候，仍然会触发onmouseover和onmouseout 事件.

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

首先，要借助事件对象，对事件对象进行兼容处理：

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事件以及可以解决以上问题，使用方法相同。

onmouseleave与onmouseout区别

1、onmouseleave、onmouseenter，鼠标进入到指定元素区域内触发事件，不支持冒泡，不包含子元素的区域。

2、onmouseout、onmouseover、鼠标进入指定元素触发事件，含子元素区域。

附加：jQuery中的子元素选择器find与children区别。

find是筛选出当前元素下的所有（儿子元素，孙子元素等）符合条件的元素。

children是筛选出当前元素下的直接子元素（儿子元素）。

摘自：

https://www.cnblogs.com/liudongpei/p/6021170.html

https://www.cnblogs.com/hello-word1/p/5288095.html