mouseover和mouseout事件引发的BUG-解决方法
mouseover和mouseout引发的BUG原由
当给一个元素添加mouseover或mouseout事件，这个元素还有子元素。
由于子元素的事件冒泡，鼠标移入或移出子元素都会触发事件。
解决的方法：根据event对象判断是否为子元素
JQuery解决方法
JQuery可以用mouseenter代替mouseover，mouseleave代替mouseout。
还可以用hover()方法。
JavaScript原生解决方法
原生的方法解决就需要了解一下relatedTarget、fromElement、toElement这三个event返回的对象。
relatedTarget是w3c标准的ie没有/fromElement在ie时mouseover使用/toElement在ie时mouseout上使用
写一下简单的思路：
鼠标移入的时候判断一下：移入的元素既不是本身，也不是元素的子节点，然后触发事件。
写了两个方法:
relatedTarget() //返回相关元素的节点
checkFather(obj,relatedTarget) //判断移入的元素既不是本身 也不是元素的子节点
在发个示例：
<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>box</title> <style> #box{position: absolute;top:20px;left:45px;background-color: red;width: 400px;height: 400px;} #box p{background-color: #000;color: #fff;} #box p span{background-color: #fff;color: #000;} </style> </head> <body> <div id="box"> <p>g.com.cn/touch/js/jquery-1.8.3.mispan <span>spanspan</span> ng.com.cn/touch/js/jquery-1.8.3.ming.com.cn/touch/js/jquery-1.8.3.min</p> <p>g.com.cn/touch/js/jquery-1.8.3.ming.com.cn/touch/js/jquery-1.8.3.ming.com.cn/touch/js/jquery-1.8.3.min</p> </div> <script> document.getElementById('box').onmouseover = function(event){ var event = event || window.event; if(checkFather(this, relatedTarget(event,'mouseover'))){ alert('mouseover'); } } document.getElementById('box').onmouseout = function(event){ var event = event || window.event; if(checkFather(this, relatedTarget(event,'mouseout'))){ alert('onmouseout'); } } /* 返回相关元素的节点 event,'mouseover' or 'mouseout' */ function relatedTarget(event,method){ if(arguments.length<2) throw new Error('relatedTarget()缺少参数'); if(event.relatedTarget) return event.relatedTarget; if(method == 'mouseover'){ return event.fromElement; }else if(method == 'mouseout'){ return event.toElement; }else{ throw new Error('relatedTarget(method)错误'); } } //判断移入的元素既不是本身 也不是元素的子节点 function checkFather(obj,relatedTarget){ return obj!=relatedTarget && !obj.contains(relatedTarget); } </script> </body> </html>
