如何防止鼠标移出移入子元素触发mouseout和mouseover事件
发布网友
发布时间：2022-04-26 15:15
共1个回答
热心网友
时间：2022-04-20 01:56
关于mouseout和mouseover事件这里就不多介绍了，具体可以参阅javascript的mouseout和mouseover事件详解一章节。
这两个事件有一个共同特点，那就是当鼠标移入或者移出子元素的时候都会触发对应的事件，这个往往在实际应用中是不需要的，或者说能够带来很大的困扰，下面就通过实例代码介绍一下如何避免此影响。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#box{
width:200px;
height:200px;
background-color:red;
padding:50px;
}
#inner{
width:50px;
height:50px;
background-color:blue;
}
</style>
<script type="text/javascript">
function isMouseLeaveOrEnter(e, handler) {
var reltg=e.relatedTarget?e.relatedTarget:e.type=='mouseout'?e.toElement:e.fromElement;
while (reltg && reltg != handler){
reltg = reltg.parentNode;
}
return (reltg != handler);
}
window.onload=function(){
var box=document.getElementById("box");
var num=document.getElementById("num");
var count=0;
box.onmouseout=function(ev){
var ev=ev||window.event;
if(!isMouseLeaveOrEnter(ev,box)){
return false;
}
num.innerHTML=count++;
}
}
</script>
</head>
<body>
<div id="box">
<div id="inner"></div>
</div>
<div>事件触发了<span id="num"></span>次</div>
</body>
</html>
以上代码实现了我们的要求，可以消除鼠标指针移入或者移出子元素所带来的困扰，虽然例子只是mouseout事件的，对于mouseover事件也是如此，下面就介绍一下此代码的实现过程:
一.实现原理:
当触发这个事件的时候，事件对象都会有一个relatedTarget属性（标准浏览器支持，IE8和IE8以下浏览器需要使用其他属性返回），它能够返回一个与事件目标节点相关的节点，如果返回的节点都是注册事件的对象的子孙元素，说明是我们将要消除的事件触发，所以只要判断如果relatedTarget返回的节点是子孙节点，就进行特殊的处理就可以了，具体可以参阅代码注释。
二.代码注释:
1.function
isMouseLeaveOrEnter(e, handler)
{}，此函数是功能的核心，可以返回一个布尔值用来标识relatedTarget属性返回的是否是子孙节点，如果返回true说明不是子孙节点，如果是false则说明是子孙节点。第一个参数是事件对象，第二个是注册事件处理函数的对象。
2.var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement，返回事件关联对象，相关属性可以参阅相关阅读。
3.while
(reltg && reltg != handler){reltg =
reltg.parentNode}，一个while循环，条件是：如果reltg存在并且不是当前注册事件的节点，如果条件不被满足，那么将获取reltg的父节点然后再赋值给reltg，如此循环往复。这个语句的作用是判断相关元素是否值子孙元素，如果是的话，总会有一个reltg.parentNode会和handler相同。
4.return (reltg != handler)，返回一个布尔值，如果相同就返回false，如果不相同就返回true。
