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 相关文章推荐
jqPlot Option配置对象详解
Jul 25 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
基于jquery的商品展示放大镜
Aug 07 Javascript
jQuery插件的写法分享
Jun 12 Javascript
javascript实现信息增删改查的方法
Jul 25 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
老生常谈ES6中的类
Jul 31 Javascript
Vue开发Html5微信公众号的步骤
Apr 11 Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 Javascript
在vue中使用jsx语法的使用方法
Sep 30 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 Javascript
jQuery 实现扁平式小清新导航
Jul 07 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中的命名空间详细介绍
2015/07/02 PHP
使用PHP进行微信公众平台开发的示例
2015/08/21 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
Js的MessageBox
2006/12/03 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
javascript实现回车键提交表单方法总结
2015/01/10 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
jQuery实现简易的输入框字数计数功能示例
2017/01/16 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
基于jquery的on和click的区别详解
2018/01/15 jQuery
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
Vue如何基于es6导入外部js文件
2020/05/15 Javascript
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
介绍Python中几个常用的类方法
2015/04/08 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
PyTorch实现AlexNet示例
2020/01/14 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
abstract class和interface有什么区别
2013/08/04 面试题
《狐假虎威》教学反思
2014/02/07 职场文书
销售主管岗位职责范本
2014/02/14 职场文书
《挑山工》的教学反思
2014/02/16 职场文书
合作意向书
2014/07/30 职场文书
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL