非常之头痛的onmouseout

本文探讨了在HTML中使用onmouseout事件时遇到的问题,即鼠标在子元素间移动未离开父元素时,事件被误触发。通过调整DOM结构与事件处理逻辑,成功解决了这一难题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

   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的这个问题

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值