onmouseover和onmouseout的烦恼
2015-06-02 17:28
260 查看
一个DIV层,当鼠标移进的时候会触发onmouseover,移出的时候会触发onmouseout。
[align=left] [/align]
很简单的逻辑,这也是我们想要的!但随之烦恼也就来了:onmouseover并不会只在移进时才触发,onmouseout也不会只在移出时才触发!鼠标在DIV里面移动时也会可能触发onmouseover或onmouseout。
[align=left] [/align]
在上图中,对于’A'来说:当鼠标进入’A'(路径’1′)时那么就会触发’A'的onmouseover事件;接着鼠标移动到’B'(路径’2′),此时’A'会触发onmouseout(先)和onmouseover(后)事件。
由此可见,如果HTML元素(‘A’层)内还有其他元素(‘B’,'C’层),当我们移动到这些内部的元素时就会触发最外层(‘A’层)的onmouseout和onmouseover事件。
这两个事件的触发表现真的就是你想要的吗?也许你需要一个只在移进时才触发的,一个只在移出时才触发的事件,不管其内部是否还有其他元素….
解决方案
在IE下确实有你需要的两个这样事件:onmouseenter 和 onmouseleave。但很不幸FF等其他浏览器并不支持,只好模拟实现:
备注:
W3C在mouseover和mouseout事件中添加了relatedTarget属性
在mouseover事件中,它表示鼠标来自哪个元素
在mouseout事件中,它指向鼠标去往的那个元素
而Microsoft在mouseover和mouseout事件中添加了两个属性
fromElement,在mouseover事件中表示鼠标来自哪个元素
toElement,在mouseout事件中指向鼠标去往的那个元素
[align=left] [/align]
很简单的逻辑,这也是我们想要的!但随之烦恼也就来了:onmouseover并不会只在移进时才触发,onmouseout也不会只在移出时才触发!鼠标在DIV里面移动时也会可能触发onmouseover或onmouseout。
[align=left] [/align]
在上图中,对于’A'来说:当鼠标进入’A'(路径’1′)时那么就会触发’A'的onmouseover事件;接着鼠标移动到’B'(路径’2′),此时’A'会触发onmouseout(先)和onmouseover(后)事件。
由此可见,如果HTML元素(‘A’层)内还有其他元素(‘B’,'C’层),当我们移动到这些内部的元素时就会触发最外层(‘A’层)的onmouseout和onmouseover事件。
这两个事件的触发表现真的就是你想要的吗?也许你需要一个只在移进时才触发的,一个只在移出时才触发的事件,不管其内部是否还有其他元素….
解决方案
在IE下确实有你需要的两个这样事件:onmouseenter 和 onmouseleave。但很不幸FF等其他浏览器并不支持,只好模拟实现:
document.getElementById('...').onmouseover = function(e){ if( !e ) e = window.event; var reltg = e.relatedTarget ? e.relatedTarget : e.fromElement; while( reltg && reltg != this ) reltg = reltg.parentNode; if( reltg != this ){ // 这里可以编写 onmouseenter 事件的处理代码 } } document.getElementById('...').onmouseout = function(e){ if( !e ) e = window.event; var reltg = e.relatedTarget ? e.relatedTarget : e.toElement; while( reltg && reltg != this ) reltg = reltg.parentNode; if( reltg != this ){ // 这里可以编写 onmouseleave 事件的处理代码 } }
备注:
W3C在mouseover和mouseout事件中添加了relatedTarget属性
在mouseover事件中,它表示鼠标来自哪个元素
在mouseout事件中,它指向鼠标去往的那个元素
而Microsoft在mouseover和mouseout事件中添加了两个属性
fromElement,在mouseover事件中表示鼠标来自哪个元素
toElement,在mouseout事件中指向鼠标去往的那个元素
相关文章推荐
- IOS 判断手机号 身份证号
- JAVA并行框架学习之ForkJoin
- 使用boost做post/get请求开发笔记
- Android Volley完全解析(四),带你从源码的角度理解Volley
- php加载速度提高方法
- CDSN markdown 不能设置字体大小?
- 新家地址 http://vizee.org
- 【转】分享II→IV FPGA本人的几个版本电源模块设计的方案
- [Java] 环境变量设置
- hdu 1298 T9
- 详细分析SAT阅读的突破途径
- mysql时间操作函数和存储过程
- 平安科技移动开发二队技术周报(第二期)
- 数据库水平切分的实现原理解析——分库,分表,主从,集群,负载均衡器
- 在开发IOS项目时计算键盘的高度
- CSDN 博客加密
- HOOK 文件保护,隐藏 禁止访问
- 利用MAC 上的Safari调试iOS 的webView程序
- mysql 权限篇
- 构建之法第8、9、10章