onmouseover和onmouseout的一些问题思考


Posted in Javascript onAugust 14, 2013

一个DIV层,当鼠标移进的时候会触发onmouseover,移出的时候会触发onmouseout。
onmouseover和onmouseout的一些问题思考 
很简单的逻辑,这也是我们想要的!但随之烦恼也就来了:onmouseover并不会只在移进时才触发,onmouseout也不会只在移出时才触发!鼠标在DIV里面移动时也会可能触发onmouseover或onmouseout。
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事件中指向鼠标去往的那个元素

Javascript 相关文章推荐
清华大学出版的事半功倍系列 javascript全部源代码
May 04 Javascript
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
Dec 12 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 Javascript
JS实现适合于后台使用的动画折叠菜单效果
Sep 21 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
js之onload事件的一点使用心得
Aug 14 #Javascript
jQuery Animation实现CSS3动画示例介绍
Aug 14 #Javascript
JavaScript中json使用自己总结
Aug 13 #Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 #Javascript
Jquery动态进行图片缩略的原理及实现
Aug 13 #Javascript
javascript中RegExp保留小数点后几位数的方法分享
Aug 13 #Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 #Javascript
You might like
PHP生成静态页面详解
2006/12/05 PHP
php中通过curl模拟登陆discuz论坛的实现代码
2012/02/16 PHP
深入php socket的讲解与实例分析
2013/06/13 PHP
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
使用PHP处理数据库数据如何将数据返回客户端并显示当前状态
2016/02/16 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
理解JSON:3分钟课程
2011/10/28 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
基于Jquery代码实现手风琴菜单
2015/11/19 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
vue等两个接口都返回结果再执行下一步的实例
2020/09/08 Javascript
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
信息管理员岗位职责
2013/12/01 职场文书
《草原》教学反思
2014/02/15 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
汽车销售员工作总结
2015/08/12 职场文书
高一化学教学反思
2016/02/22 职场文书
python解决12306登录验证码的实现
2021/04/18 Python
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python