如何避免鼠标移入子级触发父级的移出事件（两种方法）
2018-03-24 13:08
567 查看
我们经常会遇到一个问题，我们使用onmouseover和onmouseout控制鼠标的的移入移出时，如果是将鼠标从父级移动到子级的时候，会触发子级的冒泡事件，导致父级先触发移出事件后立即触发移入事件，在IE下效果不是特别好，那我这里有两种解决办法
1、利用js解决：其实就是将onmouseover和onmouseout用onmouseenter和onmouseleave来替代，我们知道与over和呕吐不同的是enter和leave，子级不会影响父级，所以自然也就解决了上面的问题
但这两个方法有兼容性问题：在IE下基本都支持，但在老版本的Chrome和Opera下不支持，而且处理兼容性也比较麻烦，所以，在使用的时候，要根据情况而定
2、利用css处理，其实很简单，就是加一个层（透明层，和父级大小一样），这个没有兼容性问题，只是可能会多一些闲置的代码，不过这种方法还是比较简单的<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ width:200px; height:200px; background:red;}
#div2{ width:100px; height:100px; background:yellow;}
</style>
<script>
window.onload = function(){
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
oDiv1.onmouseover = function(ev){
var ev = ev || window.event;
var a = this, b = ev.relatedTarget;
//console.log(a.innerHTML);
//console.log(b.innerHTML);
if( !elContains(a,b) && a!=b ){
document.title += '1';
}
};
oDiv1.onmouseout = function(ev){
var ev = ev || window.event;
var a = this, b = ev.relatedTarget;
if(!elContains(a,b) && a!=b){
document.title += '2';
}
};
};
function elContains(a, b){ //判断两个元素是否是嵌套关系
return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);
}
</script>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>补充知识：
a，b为节点1、a.contains(b)如果a包含b，返回true；否则返回false；a包含a同样返回true（不兼容火狐）2、 a.compareDocumentPosition(b) 兼容火狐a在b之后返回2；a在b之前返回4；a被b包含返回8；a包含b返回16；a包含a返回0；3、ev.relatedTarget 返回事件的目标节点相关的节点;对于 mouseover 事件来说，该属性是鼠标指针移到目标节点上时所离开的那个节点。对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。（IE9以下不兼容）但IE7/8下有ev.toElement和ev.fromElement;mouseover事件对应ev.fromElementmouseout事件对应ev.toElement接下来开始解决问题：假设a是父级；b是与事件关联的节点：解决原因1：方法（1）a包含b返回true，a包含a返回true；方法（2）a移出b（mouseout）返回4+16即返回20；a移入a（mouseover）返回0；解决原因2：方法（1）a包含a返回true，a包含b返回true方法（2）a移出a返回0，b移入a返回4+16即返回20；
1、利用js解决：其实就是将onmouseover和onmouseout用onmouseenter和onmouseleave来替代，我们知道与over和呕吐不同的是enter和leave，子级不会影响父级，所以自然也就解决了上面的问题
但这两个方法有兼容性问题：在IE下基本都支持，但在老版本的Chrome和Opera下不支持，而且处理兼容性也比较麻烦，所以，在使用的时候，要根据情况而定
2、利用css处理，其实很简单，就是加一个层（透明层，和父级大小一样），这个没有兼容性问题，只是可能会多一些闲置的代码，不过这种方法还是比较简单的<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ width:200px; height:200px; background:red;}
#div2{ width:100px; height:100px; background:yellow;}
</style>
<script>
window.onload = function(){
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
oDiv1.onmouseover = function(ev){
var ev = ev || window.event;
var a = this, b = ev.relatedTarget;
//console.log(a.innerHTML);
//console.log(b.innerHTML);
if( !elContains(a,b) && a!=b ){
document.title += '1';
}
};
oDiv1.onmouseout = function(ev){
var ev = ev || window.event;
var a = this, b = ev.relatedTarget;
if(!elContains(a,b) && a!=b){
document.title += '2';
}
};
};
function elContains(a, b){ //判断两个元素是否是嵌套关系
return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);
}
</script>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>补充知识：
a，b为节点1、a.contains(b)如果a包含b，返回true；否则返回false；a包含a同样返回true（不兼容火狐）2、 a.compareDocumentPosition(b) 兼容火狐a在b之后返回2；a在b之前返回4；a被b包含返回8；a包含b返回16；a包含a返回0；3、ev.relatedTarget 返回事件的目标节点相关的节点;对于 mouseover 事件来说，该属性是鼠标指针移到目标节点上时所离开的那个节点。对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。（IE9以下不兼容）但IE7/8下有ev.toElement和ev.fromElement;mouseover事件对应ev.fromElementmouseout事件对应ev.toElement接下来开始解决问题：假设a是父级；b是与事件关联的节点：解决原因1：方法（1）a包含b返回true，a包含a返回true；方法（2）a移出b（mouseout）返回4+16即返回20；a移入a（mouseover）返回0；解决原因2：方法（1）a包含a返回true，a包含b返回true方法（2）a移出a返回0，b移入a返回4+16即返回20；
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 鼠标移入移出事件改变图片的分辨率的两种方法
- javascript父级鼠标移入移出事件中的子集影响父级的处理方法
- mouse添加鼠标移出移入事件 两种方法
- 鼠标移入移出事件改变图片的分辨率的两种方法
- 鼠标移入移出事件的多种方法实现
- JQery鼠标移入，移出触发方法
- 当鼠标移入移出div时，触发事件（此处为图片的可见和不可见）
- 如何防止鼠标移出移入子元素触发mouseout和mouseover事件
- jQuery事件-div的显示隐藏及鼠标的移入移出http://www.cnblogs.com/liuyanmin/p/5146544.html
- 鼠标移出DIV层时，触发onMouseOut事件
- 动态添加class名，改变标签样式（包含鼠标移入、移出及点击事件）
- 1.如何避免野指针2.获取字符串的两种方法。以及malloc，calloc，ralloc的使用注意点3.二维三维数组4.数组和函数的区别
- 【Unity3D UGUI】事件接口（一） 鼠标移入、移出
- jQuery 鼠标移入移出事件切换
- vue---vue2.x中父组件如何触发子组件事件方法？
- jQuery 事件 - mousemove() 和 mouseout() 方法(移入,移出事件)
- 初学JS值之用JS实现鼠标移入移出事件
- 实例：子对话框通过事件触发和引用两种方法与父窗口通信
- input文本框没有onchange事件，可以通过下面两种方法实现当input内容改变时触发事件
- 鼠标移入和移出事件mouseenter VS mouseover 、mouseleave VS mouseout