标签：
如何防止鼠标移出移入子元素触发mouseout和mouseover事件:
关于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。
三.相关阅读:
1.relatedTarget属性可以参阅javascript的relatedTarget事件属性一章节。
2.e.type属性可以参阅javascript的type事件属性一章节。
3.e.toElement属性可以参阅javascript的toElement事件属性一章节。
4.e.fromElement属性可以参阅javascript的fromElement事件属性一章节。
5.parentNode可以参阅js如何元素当前元素所有的父元素一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10649
更多内容可以参阅:http://www.softwhy.com/javascript/
如何防止鼠标移出移入子元素触发mouseout和mouseover事件
标签：
原文地址：http://www.cnblogs.com/nulifendou/p/5145647.html
