ul标签里面的onmouseout事件 整整郁闷了我一天。一个元素有onmouseout事件,同时这个元素内部还有子元素,问题是:当鼠标在该元素的子元素上移动,但是并没移出改元素时onmouseout事件也被触发了。不管是div 还是ul都存在这个问题。我现在的标签结构是<ul onmouseover="stopTimer()" onmouseout="openTimer()"><li>第一个内容</li><li>第二个内容</li>><li>第三个内容</li></ul> 其中openTimer()和stopTimer()方法在这就不细写了,其主要的作用就是开启定时器及清空定时器以实现图片自动切换效果。但是很郁闷的是,当我在ul的子标签不同的li之间切换的时候 onmouseout事件也被触发了从而导致定时器混乱~ 试了很多种方法都不行,也尝试了在ul标签外添加div标签并将onmouseout事件放到div中触发 还是一样“当在div内部所包含的子元素中切换但是并没有移出div” onmouseout事件也被触发!
后来求教朋友 他的意思说“先判断下类型 然后再响应.. 通过Event 去拿到触发事件的对象.” 这样的做法onmouseout事件放在ul中任然有问题,然后我在ul外多加了一个div 把onmouseover和onmouseout事件放div中 不出其然还是不行,但是我貌似看到我要的效果正在一步步逼近..于是我努力的尝试,结果问题终于让我给解决了。。。 问题是 在div中我把div内所包含内容的宽、高属性都加上~ 问题基本解决了。以下是我的代码,将其贴出来 以免以后再次遇到
<div onmouseover="stopTimer()" onmouseout="fun1(event)" style="width:143;height:297px;">
<ul>
<li>第一个内容</li><li>第二个内容</li>><li>第三个内容</li>
</ul>
</div>
<script>
function fun1(e){
if (!e)
e = window.event;
var tg = (window.event) ? e.srcElement : e.target;
if (tg.nodeName == 'DIV'){
//你要执行的操作(调用的函数)
//autoChangeImage();
}
}
</script>
他的思路是: 判断目标对象是哪个.
如果是UL 那么就做操作
如果不是 return。
http://www.quirksmode.org/js/events_mouse.html#mouseover 这个API也有讲到onmouseout的这个问题