onmouseover事件和onmouseout事件全面理解


Posted in Javascript onAugust 15, 2016

这两天接触了onmouseover事件和onmouseout事件,一直以为它们只是简单的分别实现鼠标指针移动到元素上时触发事件和在鼠标指针移出指定的对象时触发事件,但是突然发现这些只是对它们简单的描述,下面让我们一起看看它们终究还有神马奇怪的特性,是好还是坏呢?

首先实现一个盒子:

onmouseover事件和onmouseout事件全面理解

给这个盒子上绑定上onmouseover事件和onmouseout事件

onmouseover事件和onmouseout事件全面理解

发现它们不会发生什么问题,然后(嘿嘿,你懂得!)

onmouseover事件和onmouseout事件全面理解

让我们创建一个B元素,让它被嵌套在A元素中,作为A的子元素

onmouseover事件和onmouseout事件全面理解

我们依旧只给外层父元素A绑定onmouseover事件和onmouseout事件,你会发现发生什么了呢?对,没错!当鼠标移入移除A的子元素B的时候居然也发生了onmouseover事件和onmouseout事件!!Why?这不是我想要的!难道这时候B就不在是A的一部分了吗?当然不是,要不也不会在移入B元素时发生onmouseover事件。这样证明,B元素还是A不可分割的一部分啊。

那到底是怎么回事呢?终究还是事件冒泡搞得鬼?大家都知道常用的浏览器中有两种事件流:事件冒泡和事件捕获。让我们看一下事件冒泡的定义:事件按照从最特定的事件目标逐级向上传播到最不特定的事件目标(document对象)的顺序。所以说当鼠标移入移除A的子元素B的时候,B的onmouseover事件和onmouseout事件会触发,但是它自己没有这两个事件啊,就把这两个事件传递给了它的父元素A,A有这两个事件所以就发生了我们看到的情况。

有人会说那怎么避免呢,毕竟不是所有人都会是这种需求嘛,我们只要父级元素的事件触发就好,子级元素就让它静静的当个美男子就好了。

所以W3C在mouseover和mouseout事件中添加了relatedTarget属性 :

•在mouseover事件中,它表示鼠标来自哪个元素

•在mouseout事件中,它指向鼠标去往的那个元素

而而Microsoft在mouseover和mouseout事件中添加了两个属性

•fromElement,在mouseover事件中表示鼠标来自哪个元素

•toElement,在mouseout事件中指向鼠标去往的那个元素

所以我们就有了如下代码的实现

document.getElementById('box1').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 事件的处理代码
alert('111');
}
}
document.getElementById('box1').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 事件的处理代码
alert('2222');
}
}

以上所述是小编给大家介绍的onmouseover事件和onmouseout事件的全面了解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
div+css布局的图片连续滚动js实现代码
May 04 Javascript
jQuery div层的放大与缩小简单实现代码
Mar 28 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
javascript弹出带文字信息的提示框效果
Jul 19 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
JSON 数据格式详解
Sep 13 Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 Javascript
使用webpack搭建vue环境的教程详解
Dec 31 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 #Javascript
又一款js时钟!transform实现时钟效果
Aug 15 #Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 #Javascript
深入分析javascript中console命令
Aug 14 #Javascript
Vue.js 表单校验插件
Aug 14 #Javascript
Vue.js学习笔记之 helloworld
Aug 14 #Javascript
详解Node.js如何开发命令行工具
Aug 14 #Javascript
You might like
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
PHP几个实用自定义函数小结
2016/01/25 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
Js获取事件对象代码
2010/08/05 Javascript
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
Python深入学习之上下文管理器
2014/08/31 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
tensorflow常用函数API介绍
2020/04/19 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
python装饰器代码深入讲解
2021/03/01 Python
老海军美国官网:Old Navy
2016/09/05 全球购物
什么是规则表达式
2012/05/03 面试题
数控专业个人求职信范例
2013/11/29 职场文书
教师开学感言
2014/02/14 职场文书
学生意外伤害赔偿协议书
2014/09/17 职场文书
交通安全温馨提示语
2015/07/14 职场文书
2016年公司新年寄语
2015/08/17 职场文书
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏