onmouseout JavaScript OnMouseOut事件
大家好，感谢邀请，今天来为大家分享一下onmouseout的问题，以及和JavaScript OnMouseOut事件的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！
onmouseout与onmouseleave的区别是什么(js)
我遇到的一个最明显的区别就是onmouseout是指离开指定元素,而onmouseleave是离开指定元素的范围(区域)，如下代码你可以尝试切换事件，看看有效果
<div title="onmouseleave与onmuseout的区别，leave是离开范围，out是离开元素" id="dd" style="border:0px;height:100px;margin-top:10px;" onmouseleave="this.style.display='none'">
<div title="数字、小数点匹配1" style="border:0px;height:33px;background-color:blue;"></div>
<div title="数字、小数点匹配2" style="border:0px;height:33px;background-color:black;"></div>
<div title="数字、小数点匹配3" style="border:0px;height:33px;background-color:green"></div>
</div>
这只是我在实际应用当中偶遇到的不同，可能还会有其他的区别。
JavaScript OnMouseOut事件
javascript onmouseover和onmouseout事件
onmouseover和onmouseout鼠标移入移出时触发的事件：
onmouseover用户鼠标移入元素时触发的事件。并执行onmouseover调用的函数。
onmouseout用户鼠标移开元素时触发的事件。并执行onmouseout调用的函数。
onmouseover和onmouseout这两个事件在javascript中较常用。
下面通过一个示例更深入了解这两个事件的使用：
示例：鼠标移入时，改变字体的背景色，移出时，还原默认的背景色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>鼠标移入时，改变字体的背景色，移出时，还原默认的背景色。</title>
<style>
.xuexi{width:200px;height:120px;background:#abcdef;border:1px solid green;}
</style>
<script>
function aixuexi(){
var woaixuexi=document.getElementById("woaixuexi");
woaixuexi.style.background="yellowgreen";
}
function xuexi(){
var xuexi=document.getElementById("woaixuexi");
xuexi.style.background="#abcdef";
}
</script>
</head>
<body>
<div id="woaixuexi" onmouseover="aixuexi();" onmouseout="xuexi();" class="xuexi"></div>
</body>
</html>
JavaScript中mouseout函数一般位置
与 mouseenter事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter事件。
与 mouseout事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave事件。如果鼠标指针离开任何子元素，同样会触发 mouseout事件。
解决两者的区别，看下面引用的例子：
当为某个容器绑定了 onmouseover或者onmouseout事件时，如果这个容器中有其它元素节点，那么鼠标在内部移动时会频繁触发 onmouseover和onmouseout事件。
而我想要的效果是：事件仅在鼠标进入/离开元素区域触发一次，当鼠标在元素区域内部移动的时候不会触发。
为什么会出现这个原因呢？其实是因为事件冒泡导致的。当鼠标移上或者移出容器中的子节点时，会分别触发mouseover和mouseout事件，紧随着dom树向上冒泡传递，直到被事件处理程序（监听器）捕获捕获或者冒泡到根节点（document或者window），也就是说事件会向它的父级对象派发。
知道了问题产生原因，那么解决起来是不是也很简单呢？最初我想的是取消事件冒泡，使用event.cancelBubble= true（IE）和e.stopPropagation()（其它浏览器），但是简单测试后发现貌似没有什么效果，问题依旧，貌似冒泡停止不了，原因不明。（补充：我是测试将容器中的a链接节点取消冒泡，但是发现鼠标移上移下还会触发事件。a节点下还有span节点。难道要将容器中所有节点都取消冒泡才行？有心人可以测试，如果真的这样，那也太恶心了，要是N多的节点，难道都要停止冒泡下？）
其实在IE下鼠标事件有个 mouseEnter和 mouseLeave，这个就是移进和移处容器时触发一次，在内部移动则不会触发，遗憾的是只有IE支持。我们现在要做的就是“为非IE浏览器添加mouseEnter和mouseLeave支持”。
我翻阅了百度最新开源的JS库tangram，看了里面的处理，发现貌似是单独处理了非IE浏览器下的事件，使用一个叫“baidu.event._eventFilter._crossElementBoundary(listener, e)”的方法修正mouseover和mouseout，然后封装了个mouseEnter和mouseLeave事件。
baidu.event._eventFilter._crossElementBoundary= function(listener, e){
var related= e.relatedTarget,
current= e.currentTarget; if(typeof related=='undefined'){ return listener.call(current, e);
}//如果current和related都是body，contains函数会返回false
// Firefox有时会把XUL元素作为relatedTarget
//这些元素不能访问parentNode属性
// thanks jquery& mootools
//如果current包含related，说明没有经过current的边界
//注：baidu.dom.contains是个定义的检测节点是否包含的函数，下面我会讲到
if(related=== false|| current== related|| related.prefix=='xul'|| baidu.dom.contains(current, related)){ return;
}//调用执行
return listener.call(current, e);
};123456789101112131415161718
百度的方法我并不喜欢，首先它只对非IE浏览器进行了处理，当然，它又进行了封装，可以直接使用mouseEnter和mouseLeave；但是，我们做普通开发，没必要这么封装，我只是想要简单的去掉mouseover和mouseout的这个恼人特性。
而jQuery则不是这么做的，它是直接对IE和其它所有浏览器下的mouseover和mouseout事件进行了修正。参考jQuery，我得到了我目前所有的代码。
首先，介绍个判断节点对象是否包含的函数contains.
function contains(p,c){
return p.contains?
p!= c&& p.contains(c):!!(p.compareDocumentPosition(c)& 16);
}1234
然后就是重点的了，这里我们在IE下用到了fromElement和toElement，这两个是IE下的鼠标移上去时和移出时的节点对象。
function fixedMouse(e,target){
var related, type=e.type.toLowerCase();//这里获取事件名字
if(type=='mouseover'){
related=e.relatedTarget||e.fromElement
}else if(type='mouseout'){
related=e.relatedTarget||e.toElement
}else return true; return related&& related.prefix!='xul'&&!contains(target,related)&& related!==target;
}12345678910
然后我们怎么用呢？比如在绑定事件时，
//addListener为封装的事件绑定函数addListener(target,'mouseover',function(e){
e=e||window.event; if(fixedMouse(e, target)){//do something
}
},false);1234567
这样就会只在移入移出target节点时触发mouseover和mouseout了。
当然，你也可以将上面的代码单独封装成mouseEnter和mouseLeave，这样可以以后调用时更好区别mouseover和mouseout。
onmouseout和JavaScript OnMouseOut事件的问题分享结束啦，以上的文章解决了您的问题吗？欢迎您下次再来哦！