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 相关文章推荐
Javascript实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
浅析JS刷新框架中的其他页面 && JS刷新窗口方法汇总
Jul 08 Javascript
javascript + jquery实现定时修改文章标题
Mar 19 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
May 07 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
js html实现计算器功能
Nov 13 Javascript
Vue中this.$nextTick的作用及用法
Feb 04 Javascript
JS出现404错误原理及解决方案
Jul 01 Javascript
JavaScript中isPrototypeOf函数
Nov 07 Javascript
Moment的feature导致线上bug解决分析
Sep 23 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
Wordpress php 分页代码
2009/10/21 PHP
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
jQuery查找节点方法完整实例
2016/09/13 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
2018/06/22 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
python基础教程之udp端口扫描
2014/02/10 Python
Python3读取文件常用方法实例分析
2015/05/22 Python
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
python查询mysql,返回json的实例
2018/03/26 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
自荐信格式范文
2013/10/07 职场文书
大学生旅游业创业计划书
2014/01/29 职场文书
赔偿协议书范本
2014/04/15 职场文书
自书遗嘱范文
2015/08/07 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server