转自 http://sinian1120na.blog.163.com/blog/static/2458050820097151033950/
这个貌似没有太简洁的方法, 只有clearTimeout和if contains两种...
最近在做一个JS效果时,发现了这么个问题:
当鼠标移入DIV内部的Img或其它元素上时,内部元素的mouseover事件被触发。但是再次将鼠标移动到DIV内部的另一个内部元素时,
却会发现首先被触发的是DIV的mouseout事件,紧接着才是当前这个元素的mouseover事件。
在网上百度查找到了一些资料,现在做下总结:
方法一: 通过设置Settimeout
当鼠标触发外层的mouseout事件时,开始计时Settimeout,一段时间后再去执行mouseout需要执行的函数;这段时间是为了判断鼠标是否移动到了其内部元素。
当鼠标mouseover到了内部元素上时,这时候会触发它本身以及外层的mouseover事件,这时在事件中使用clearTimeout来消除之前定时的out后要执行的函数。
例:
var timeId; // 全局变量 用来计时
function mouseOver()
{
cleartimeout(timeId); // 当触发onmouseover事件时,先清除鼠标移出事件的函数。
... //后去处理触发mouseover事件要执行的函数
}
function mouseout()
{
timeId = setTimeout("outMethod()",100); //先将mouseout要执行的函数延时执行。这段时间是为了判断鼠标是否移动到了其内部元素。
}
方法二: 通过Contains
通过Contains判断鼠标OUT的时候,是否OUT到了它的内部元素上,也就是说,要判断鼠标OUT的时候移动到的元素是不是属于这个元素的内部元素。
比如在触发事件后本是要这么执行函数:
function mouseout()
{
outMethod();
}
现因为需要在执行函数前,先去判断在这个事件中鼠标移动到的元素是否是包含在它本身当中,不属于时才执行后面函数:
function mouseout()
{
if(!this.contains(event.toElement))
{
outMethod();
}
}
但是这个contains只有IE支持,为了让非IE支持就有了下面这段代码,增加了这么个contains函数:
if(typeof(HTMLElement)!="undefined"){
HTMLElement.prototype.contains = function(obj) {
while(obj!=null && typeof(obj.tagName)!="undefind"){
if(obj==this)
return true;
obj=obj.parentNode;
}
return false;
};
}
其实就是不停的找鼠标移动到的元素的父元素,看这个父元素是不是就是鼠标原来呆的地方。
如果这个元素他爹或他爷爷就是这个鼠标刚开始OUT出来的元素,那么这个元素肯定就是鼠标OUT出来的元素的内部元素。