onmouseover事件和onmouseout事件全面理解
作者:simpleton 时间:2024-04-17 09:42:37
这两天接触了onmouseover事件和onmouseout事件,一直以为它们只是简单的分别实现鼠标指针移动到元素上时触发事件和在鼠标指针移出指定的对象时触发事件,但是突然发现这些只是对它们简单的描述,下面让我们一起看看它们终究还有神马奇怪的特性,是好还是坏呢?
首先实现一个盒子:
给这个盒子上绑定上onmouseover事件和onmouseout事件
发现它们不会发生什么问题,然后(嘿嘿,你懂得!)
让我们创建一个B元素,让它被嵌套在A元素中,作为A的子元素
我们依旧只给外层父元素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事件的全面了解网站的支持!
来源:http://www.cnblogs.com/jingh/archive/2016/08/15/5771479.html
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
SQL SERVER 2014 安装图解教程(含SQL SERVER 2014下载)
![](https://img.aspxhome.com/file/2023/1/113591_0s.png)
Windows安装Anaconda并且配置国内镜像的详细教程
![](https://img.aspxhome.com/file/2023/8/61708_0s.png)
使用python实现knn算法
![](https://img.aspxhome.com/file/2023/5/120465_0s.png)
Golang爬虫框架 colly的使用
![](https://img.aspxhome.com/file/2023/6/107346_0s.jpg)
通过C++学习Python
详解django.contirb.auth-认证
Python中py文件转换成exe可执行文件的方法
![](https://img.aspxhome.com/file/2023/9/104809_0s.jpg)
通过python模糊匹配算法对两个excel表格内容归类
![](https://img.aspxhome.com/file/2023/5/127595_0s.jpg)
asp 使用正则表达式替换word中的标签,转为纯文本
wxPython中listbox用法实例详解
Python中的嵌套循环详情
![](https://img.aspxhome.com/file/2023/3/120433_0s.png)
SQL Server分页方法汇总
Python编程产生非均匀随机数的几种方法代码分享
![](https://img.aspxhome.com/file/2023/7/67417_0s.png)
使用PyV8在Python爬虫中执行js代码
python try...finally...的实现方法
python3人脸识别的两种方法
![](https://img.aspxhome.com/file/2023/6/124096_0s.jpg)
MySql nion与Limit查询介绍
![](https://img.aspxhome.com/file/2023/9/101349_0s.png)
IE中雅黑字体给布局带来的变化
![](https://img.aspxhome.com/file/UploadPic/20086/13/2008613122420492s.gif)