HTML div标签内部组件导致onmouseout事件调用问题
2014-08-14 16:46
225 查看
这几天一直纠结于一个html页面上的bug, 我们前台框架是ICEFaces3.1, 这些无所谓,翻译出来都是html标签
问题表述: 情况是我的一个div里套了很多ul和li标签,我在这个外层的div里放了一个onmouseout鼠标事件,很简单的情况,然而在测试期间发现,当鼠标移动到这个div内部的任意元素上时,外层div的onmouseout事件竟然也被触发了,这个问题困扰了我已经有2天了,一直没有找到解决办法,昨天在网上搜了半天,发现其实有不少开源js框架里已经解决了这个问题。
解决方案: 主要思想就是,将这个onmouseout事件触发的函数使用onmouseout调用并传入一个很短的时间,同时在这个div里加入一个onmouseover事件,在onmouseover时调用一个clearTimeout函数将它remove掉,即可解决。
举例:
Html代码
<div onmouseout="doSomethingDiv();" onmouseover="clearTime();">
//内部一大堆元素...
<ul>
<li>....</li>
</ul>
</div>
面对这种div内部元素也会触发外部onmouseout动作的情况,需要添加一个setTimeout和clearTimeout方法,相当于在内部触发onmouseout事件之前便将它clear掉:
Js代码
var t;
//在这里调用setTimeout方法让它在一段很短的时间后执行
function doSomethingDiv(){
t = setTimeout('doSomeFunc()',400);
}
//将setTimeout事件remove掉
function clearTime(){
clearTimeout(t);
}
效果不错,是个很聪明的办法.
问题表述: 情况是我的一个div里套了很多ul和li标签,我在这个外层的div里放了一个onmouseout鼠标事件,很简单的情况,然而在测试期间发现,当鼠标移动到这个div内部的任意元素上时,外层div的onmouseout事件竟然也被触发了,这个问题困扰了我已经有2天了,一直没有找到解决办法,昨天在网上搜了半天,发现其实有不少开源js框架里已经解决了这个问题。
解决方案: 主要思想就是,将这个onmouseout事件触发的函数使用onmouseout调用并传入一个很短的时间,同时在这个div里加入一个onmouseover事件,在onmouseover时调用一个clearTimeout函数将它remove掉,即可解决。
举例:
Html代码
<div onmouseout="doSomethingDiv();" onmouseover="clearTime();">
//内部一大堆元素...
<ul>
<li>....</li>
</ul>
</div>
面对这种div内部元素也会触发外部onmouseout动作的情况,需要添加一个setTimeout和clearTimeout方法,相当于在内部触发onmouseout事件之前便将它clear掉:
Js代码
var t;
//在这里调用setTimeout方法让它在一段很短的时间后执行
function doSomethingDiv(){
t = setTimeout('doSomeFunc()',400);
}
//将setTimeout事件remove掉
function clearTime(){
clearTimeout(t);
}
效果不错,是个很聪明的办法.
相关文章推荐
- 内部元素导致onmouseout,onmouseover事件调用问题
- 解决因焦点转移到其它组件,导致在 JFrame 中捕获不到键盘按键事件问题的方法
- html页面在IOS-safari浏览器下绑定点击绑定事件的div时会显示灰色框的问题
- 有关html5+调用百度地图接口导致坐标有偏差问题
- HTML中div标签与table标签组合使用问题
- 解决鼠标经过内部元素触发onmouseout事件的问题
- CSS使用div:before导致HTML中当前标签及其子标签都自动加上了:before样式
- 前端-mui框架的div侧拉菜单,导致页面中按钮的点击事件无法响应的问题
- HTML img标签之onAbort、onError、onLoad事件与问题
- a标签href和onclick事件同时写导致的问题
- Spring Cacheable标签 内部调用失效问题
- HTML img标签之onAbort、onError、onLoad事件与问题
- html的<a>标签IE下绑定点击事件后也会修改href问题
- 总结:解决鼠标经过内部元素触发onmouseout事件的问题
- HTML img标签之onAbort、onError、onLoad事件与问题
- h5中 <!DOCTYPE html>标签问题,div里面如果装有一个img下边会有2px间隙
- 在javascript或者jQuery中绑定按钮点击事件,和在HTML 标签中直接调用onclick属性有什么区别?
- html 中a标签的问题(无反应,跳转,调用方法)
- 【js学习之路】事件绑定函数中,将this换成调用对象导致的问题
- 关于使用Spring声明式事务时,在类的内部方法互相调用时,Spring无法拦截内部方法调用,导致事务不起作用的问题研究