HTML div标签内部组件导致onmouseout事件调用问题

这几天一直纠结于一个html页面上的bug, 我们前台框架是ICEFaces3.1, 这些无所谓,翻译出来都是html标签 
   问题表述: 情况是我的一个div里套了很多ul和li标签,我在这个外层的div里放了一个onmouseout鼠标事件,很简单的情况,然而在测试期间发现,当鼠标移动到这个div内部的任意元素上时,外层div的onmouseout事件竟然也被触发了,这个问题困扰了我已经有2天了,一直没有找到解决办法,昨天在网上搜了半天,发现其实有不少开源js框架里已经解决了这个问题。 
   解决方案: 主要思想就是,将这个onmouseout事件触发的函数使用onmouseout调用并传入一个很短的时间,同时在这个div里加入一个onmouseover事件,在onmouseover时调用一个clearTimeout函数将它remove掉,即可解决。
 
   举例:
 
Html代码   收藏代码
  1. <div onmouseout="doSomethingDiv();" onmouseover="clearTime();">  
  2. //内部一大堆元素...  
  3.   <ul>  
  4.     <li>....</li>  
  5.   </ul>  
  6. </div>  

面对这种div内部元素也会触发外部onmouseout动作的情况,需要添加一个setTimeout和clearTimeout方法,相当于在内部触发onmouseout事件之前便将它clear掉:  
Js代码   收藏代码
  1. var t;  
  2. //在这里调用setTimeout方法让它在一段很短的时间后执行  
  3. function doSomethingDiv(){  
  4.    t = setTimeout('doSomeFunc()',400);  
  5. }  
  6.   
  7. //将setTimeout事件remove掉  
  8. function clearTime(){  
  9.    clearTimeout(t);  
  10. }  


效果不错,是个很聪明的办法.
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值