解决鼠标经过内部元素触发onmouseout事件的问题

最近在做一个js的效果,发现了一个问题:

当鼠标移入DIV内部的Img或其它元素上时,内部元素的mouseover事件被触发。但是再次将鼠标移动到DIV内部的另一个内部元素时,

却会发现首先被触发的是DIV的mouseout事件,紧接着才是当前这个元素的mouseover事件。

说一个非常简单的解决方法吧:

var ch;
div.onmouseout = function(){
     ch = setTimeOut("doSomething", 100);        
}
div.onmouseover = function(){
     clearTimeOut(ch);
}

简单解释一下,由于是当从父元素移到子元素时,先触发的是mouseout事件,然后再触发mouseover事件

抓住这一点,给mouseout设置延迟函数;

如果是上面那种情况(从父元素移动到子元素),触发mouseover事件,清楚延迟函数

第二种情况是真的移出了,从父元素移到它的上层元素,则正常触发doSomething函数

posted @ 2015-12-31 16:45  安超  阅读(298)  评论(0编辑  收藏  举报