你的位置:首页 > Java教程

[Java教程]如何防止鼠标移出移入子元素触发mouseout和mouseover事件


如何防止鼠标移出移入子元素触发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/