总结:解决鼠标经过内部元素触发onmouseout事件的问题
来源:互联网 发布:水土云计算公租房 编辑:程序博客网 时间:2024/04/30 12:59
最近在做一个JS效果时,发现了这么个问题:
当鼠标移入DIV内部的Img或其它元素上时,内部元素的mouseover事件被触发。但是再次将鼠标移动到DIV内部的另一个内部元素时,
却会发现首先被触发的是DIV的mouseout事件,紧接着才是当前这个元素的mouseover事件。
在网上百度查找到了一些资料,现在做下总结:
方法一: 通过设置Settimeout
当鼠标触发外层的mouseout事件时,开始计时Settimeout,一段时间后再去执行mouseout需要执行的函数, 这段时间是为了判断鼠标 是否移动到了其内部元素。
当鼠标mouseover到了内部元素上时,这时候会触发它本身以及外层的mouseover事件,这时在事件中使用clearTimeout来消除之前定 时的out后要执行的函数。
例:
方法二: 通过Contains
通过Contains判断鼠标OUT的时候,是否OUT到了它的内部元素上,也就是说,要判断鼠标OUT的时候移动到的元素是不是属于这个元素 的内部元素。
比如在触发事件后本是要这么执行函数:
现因为需要在执行函数前,先去判断在这个事件中鼠标移动到的元素是否是包含在它本身当中,不属于时才执行后面函数:
但是这个contains只有IE支持,为了让非IE支持就有了下面这段代码,增加了这么个contains函数:
其实就是不停的找鼠标移动到的元素的父元素,看这个父元素是不是就是鼠标原来呆的地方。
如果这个元素他爹或他爷爷就是这个鼠标刚开始OUT出来的元素,那么这个元素肯定就是鼠标OUT出来的元素的内部元素。
其中‘狼问苍穹‘的博客写的十分的详细:
<a herf="http://www.cnblogs.com/zhaoshun/archive/2009/01/16/1376998.html"> 解决HTML内部元素的Mouse事件干扰(实例,兼容ff,ie)</a>
- 解决鼠标经过内部元素触发onmouseout事件的问题
- 总结:解决鼠标经过内部元素触发onmouseout事件的问题
- 解决内部元素onMouseOver/onMouseOut事件冒泡触发父元素的相应事件
- onmouseout,mouseover经过子元素也触发的问题解决方案
- 内部元素导致onmouseout,onmouseover事件调用问题
- onmouseout,mouseover经过子元素也触发的问题解决方案(兼容)
- Table的onMouseOver和onMouseOut鼠标事件的问题
- mouseover和mouseout事件在鼠标经过子元素时也会触发
- mouseover和mouseout事件在鼠标经过子元素时也会触发
- 解决js中onMouseOut事件冒泡的问题
- 解决js中onMouseOut事件冒泡的问题
- onmouseover, onmouseout的触发顺序问题
- 鼠标触发的事件
- 鼠标的触发事件
- 解决IE 下div与img重叠无法触发鼠标事件的问题
- HTML div标签内部组件导致onmouseout事件调用问题
- 解决子父级元素交替执行onmouseover、onmouseout事件干扰
- 关于鼠标悬停,事件延时触发的解决
- 演示视频:编写 Swing 猜数字游戏
- java的学习 希望你能耐心看完
- javah生成JNI投文件
- exam4actual the latest:310-200 Exam Part 1
- Flash8中画线函数(实线、虚线、波浪线)
- 总结:解决鼠标经过内部元素触发onmouseout事件的问题
- SQLite入门与分析(四)---Page Cache之事务处理3
- 杂记--关于自己想要的?
- ORACLE中集合函数的注意事项
- 杂记--关于工作
- 【原】桌面软件的智能更新——MagicUpdate更新原理
- SQLite入门与分析(四)---Page Cache之事务处理(4)
- 杂记--关于XX心
- IT职业教育 更具就业优势