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 相关文章推荐
jquery解决图片路径不存在执行替换路径
Feb 06 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 Javascript
javascript三种代码注释方法
Jun 02 Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
使用vue-infinite-scroll实现无限滚动效果
Jun 22 Javascript
详解React服务端渲染从入门到精通
Mar 28 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 Javascript
JavaScript的一些小技巧分享
Jan 06 Javascript
手写实现JS中的new
Nov 07 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
Linux下编译redis和phpredis的方法
2016/04/07 PHP
php微信开发之批量生成带参数的二维码
2016/06/26 PHP
javascript 内存回收机制理解
2011/01/17 Javascript
javascript中的继承实例代码
2011/04/27 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
基于javascript实现表格的简单操作
2016/05/21 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
JS异步函数队列功能实例分析
2017/11/28 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
python控制台显示时钟的示例
2014/02/24 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
详解Python with/as使用说明
2018/12/13 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
delegate与普通函数的区别
2014/01/22 面试题
法律进企业活动方案
2014/03/04 职场文书
四风自我剖析材料
2014/09/30 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
慈善募捐倡议书
2015/04/27 职场文书
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python
Python各协议下socket黏包问题原理
2022/04/12 Python