mouseenter 和 mouseover 的区别
当鼠标移动到元素上时就会触发mouseenter事件
类似mouseover,它们两者之间的差别是
mouseover鼠标经过自身盒子会触发,经过子盒子还会触发。mouseenter只会经过自身盒子触发
之所以这样,就是因为mouseenter不会冒泡
跟mouseenter搭配鼠标离开mouseleave同样不会冒泡
代码示例 :
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Document</title>
- <style>
- .father {
- width: 300px;
- height: 300px;
- background-color: pink;
- margin: 100px auto;
- }
- .son {
- width: 200px;
- height: 200px;
- background-color: purple;
- }
- </style>
- </head>
- <body>
- <div class="father">
- <div class="son"></div>
- </div>
- <script>
- var father = document.querySelector('.father');
- var son = document.querySelector('.son');
- father.addEventListener('mouseenter', function() {
- console.log(11);
- })
- </script>
- </body>
- </html>
mouseenter 和 mouseover 的区别的更多相关文章
- mouseenter和mouseover的区别
mouseover事件-不论鼠标指针穿过被选元素或其子元素,都会触发. mouseenter事件-只有在鼠标指针穿过被选元素时才会触发,对应事件为mouseleave. mouseout事件-不论鼠标 ...
- mouseenter与mouseover的区别
mouseover 事件:只有在鼠标指针穿过被选元素时,才会触发. mouseover 事件:鼠标指针穿过任何子元素,都会触发. 请看例子的演示.
- mouseover,mouseout,mouseenter,mouseleave的区别
相信做前端开发的都听说过“冒泡型事件”吧,<JavaScript高级程序设计>第九章有详细的讲述,但是,在学习的时候一知半解,也没详细去理解,导致最近在工作中碰到了问题:有许多 li 标签 ...
- mouseover与mouseenter与mousemove的区别mouseout与mouseleave的区别
<html> <head> <title></title> </head> <body> <p> 当鼠标进入div1 ...
- mouseover/mouseenter/mouseout/mouseleave的区别
mouseover:鼠标指针穿过被选元素或其子元素,均会触发事件 mouseenter:鼠标指针穿过被选元素时才触发事件 mouseout:鼠标指针离开被选元素或其子元素则触发事件 mouseleav ...
- 3.mouseenter和mouseover事件的区别
<html> <head> <meta charset="UTF-8"> <script src="jquery-3.3.1.j ...
- mouseenter 与 mouseover 区别于选择
mouseover事件, 箭头在子元素移动会触发冒泡事件, 子元素的鼠标箭头可触父元素方法, 相反,mouseenter事件功能与mouseover类似, 但鼠标进入某个元素不会冒泡触发父元素方法. ...
- mouseenter和hover的区别
js中鼠标事件中,mouseenter和hover都可以达到,鼠标悬浮在目标上,触发事件,那么两者效果相同,有什么区别呢. 经过自己亲自试验.发现,mouseenter和hover还是有区别的. ho ...
- IE jquery mouseenter,mouseover超奇葩问题
做了个项目,结构很简单 <div class="index-main" data-url="./img/index_default.jpg"> &l ...
随机推荐
- python练习册 每天一个小程序 第0008题
1 # -*-coding:utf-8-*- 2 __author__ = 'Deen' 3 ''' 4 题目描述: 5 一个HTML文件,找出里面的正文. 6 7 思路: 8 利用Beautiful ...
- Java的浅克隆和深克隆
如何实现对象的克隆 (1)实现 Cloneable 接口并重写 Object 类中的 clone() 方法: (2)实现 Serializable 接口,通过对象的序列化和反序列化实现克隆,可以实现真 ...
- Windows 8下完美使用Virtual PC 2007(virtual pc 2007 64 win8 兼容性)
Windows 8下完美使用Virtual PC 2007(virtual pc 2007 64 win8 兼容性) 一.从微软的官方网站下载Virtual PC 2007 SP1英文版,文件名为se ...
- vue3.0的更新和defineProperty优化?
放弃 Object.defineProperty ,使用更快的原生 Proxy (访问对象拦截器, 也成代理器) 提速, 降低内存使用, Tree-shaking更友好 支持IE11等 使用Types ...
- hashCode()方法的作用?
hashCode()方法与equals()方法相似,都是来自java.lang.Object类的方法,都允许用户定义的子类重写这两个方法. 一般来说,equals这个方法是给用户调用的,如果你想根据自 ...
- js file对象 文件大小转换可视容易阅读的单位
function returnFileSize(number) { if(number < 1024) { return number + 'bytes'; } else if(number & ...
- promethues常用的函数
prometheus函数常用 时数据 (Instant vector): 包含一组时序,每个时序只有一个点,例如:http_requests_total区间数据 (Range vector): 包含一 ...
- IE中的编码位置
进入设置 找到Editor 找到File Encodings
- (stm32学习总结)—LCD—液晶显示
显示器简介 显示器属于计算机的 I/O 设备,即输入输出设备.它是一种将特定电子信息输出到屏幕上再反射到人眼的显示工具.常见的有 CRT 显示器.液晶显示器.LED 点阵显示器及OLED 显示器 本章 ...
- HTML5与HTML4区别简介
移动互联网的快速发展,尤其是4G时代已经来临,加上微软在Windows 10中搭载了新的浏览器Edge取代了IE的地位,所以现在很多网站都开始抛弃IE朝着HTML5发展,PC端在不同浏览器之间的兼容性 ...