HTML div标签内部组件导致onmouseout事件调用有关问题
日期：2014-05-17 浏览次数：20588 次
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掉，即可解决。
举例：
面对这种div内部元素也会触发外部onmouseout动作的情况，需要添加一个setTimeout和clearTimeout方法，相当于在内部触发onmouseout事件之前便将它clear掉：
效果不错，是个很聪明的办法.
这几天一直纠结于一个html页面上的bug， 我们前台框架是ICEFaces3.1， 这些无所谓，翻译出来都是html标签
问题表述： 情况是我的一个div里套了很多ul和li标签，我在这个外层的div里放了一个onmouseout鼠标事件，很简单的情况，然而在测试期间发现，当鼠标移动到这个div内部的任意元素上时，外层div的onmouseout事件竟然也被触发了，这个问题困扰了我已经有2天了，一直没有找到解决办法，昨天在网上搜了半天，发现其实有不少开源js框架里已经解决了这个问题。
解决方案： 主要思想就是，将这个onmouseout事件触发的函数使用onmouseout调用并传入一个很短的时间，同时在这个div里加入一个onmouseover事件，在onmouseover时调用一个clearTimeout函数将它remove掉，即可解决。
举例：
<div onmouseout="doSomethingDiv();" onmouseover="clearTime();">
//内部一大堆元素...
<ul>
<li>....</li>
</ul>
</div>
面对这种div内部元素也会触发外部onmouseout动作的情况，需要添加一个setTimeout和clearTimeout方法，相当于在内部触发onmouseout事件之前便将它clear掉：
var t;
//在这里调用setTimeout方法让它在一段很短的时间后执行
function doSomethingDiv(){
t = setTimeout('doSomeFunc()',400);
}
//将setTimeout事件remove掉
function clearTime(){
clearTimeout(t);
}
效果不错，是个很聪明的办法.
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
