onmouseover和onmouseout的烦恼
来源:互联网 发布:生化危机 知乎 终章 编辑:程序博客网 时间:2024/05/13 01:56
一个DIV层,当鼠标移进的时候会触发onmouseover,移出的时候会触发onmouseout。
很简单的逻辑,这也是我们想要的!但随之烦恼也就来了:onmouseover并不会只在移进时才触发,onmouseout也不会只在移出时才触发!鼠标在DIV里面移动时也会可能触发onmouseover或onmouseout。
在上图中,对于’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事件中指向鼠标去往的那个元素
- onmouseover和onmouseout的烦恼
- onmouseover和onmouseout的烦恼
- onmouseover和onmouseout的一些思考
- onmouseover和onmouseout的烦人问题
- PullDownMenu.htm 和 onMouseOver,onMouseOut的使用
- onmouseover 和 onmouseout onmouseleave
- onmouseover 和 onmouseout onmouseleave
- onMouseOver 和 onMouseOut事件冒泡
- Table的onMouseOver和onMouseOut鼠标事件的问题
- 给GridView的行加上onmouseover 和 onmouseout属性
- onMouseover与onMouseout 的Javascript和CSS实现
- onMouseOver, onMouseMove, onMouseDown, onMouseUp, onMouseOut 的介绍和区别
- onMouseOver, onMouseMove, onMouseDown, onMouseUp, onMouseOut 的介绍和区别
- 利用JS实现OnMouseOver和OnMouseOut功能
- onmouseover和onmouseout应用于RadioButtonList或CheckBoxList
- ASP.NET 实现onmouseover和onmouseout
- js事件(onmouseover和onmouseout)
- onmouseover, onmouseout的触发顺序问题
- JComboBox下拉列表右边箭头消失
- JavaScript 全角半角转换问题
- 《鸟哥Linux私房菜》学习笔记_chap10_磁盘 文件系统管理
- 应该如何正确对待员工的抱怨
- asp.net单点登录(SSO)解决方案
- onmouseover和onmouseout的烦恼
- Open Flash Chart 2 (OFC2) 实例文档 - 2 - 柱图
- Oracle数据库文件恢复与备份策略
- XML Serialization Using C#
- HashMap put() get()
- [SWT]SWT 源代码下载
- execute、executeQuery和executeUpdate之间的区别
- 三级联动效果
- HTML 代码判断ie版本