• 当鼠标移动到元素上时就会触发mouseenter事件

  • 类似mouseover,它们两者之间的差别是

  • mouseover鼠标经过自身盒子会触发,经过子盒子还会触发。mouseenter只会经过自身盒子触发

  • 之所以这样,就是因为mouseenter不会冒泡

  • 跟mouseenter搭配鼠标离开mouseleave同样不会冒泡

代码示例 :

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <title>Document</title>
  9. <style>
  10. .father {
  11. width: 300px;
  12. height: 300px;
  13. background-color: pink;
  14. margin: 100px auto;
  15. }
  16.  
  17. .son {
  18. width: 200px;
  19. height: 200px;
  20. background-color: purple;
  21. }
  22. </style>
  23. </head>
  24.  
  25. <body>
  26. <div class="father">
  27. <div class="son"></div>
  28. </div>
  29. <script>
  30. var father = document.querySelector('.father');
  31. var son = document.querySelector('.son');
  32. father.addEventListener('mouseenter', function() {
  33. console.log(11);
  34.  
  35. })
  36. </script>
  37. </body>
  38.  
  39. </html>

mouseenter 和 mouseover 的区别的更多相关文章

  1. mouseenter和mouseover的区别

    mouseover事件-不论鼠标指针穿过被选元素或其子元素,都会触发. mouseenter事件-只有在鼠标指针穿过被选元素时才会触发,对应事件为mouseleave. mouseout事件-不论鼠标 ...

  2. mouseenter与mouseover的区别

    mouseover 事件:只有在鼠标指针穿过被选元素时,才会触发. mouseover 事件:鼠标指针穿过任何子元素,都会触发. 请看例子的演示.

  3. mouseover,mouseout,mouseenter,mouseleave的区别

    相信做前端开发的都听说过“冒泡型事件”吧,<JavaScript高级程序设计>第九章有详细的讲述,但是,在学习的时候一知半解,也没详细去理解,导致最近在工作中碰到了问题:有许多 li 标签 ...

  4. mouseover与mouseenter与mousemove的区别mouseout与mouseleave的区别

    <html> <head> <title></title> </head> <body> <p> 当鼠标进入div1 ...

  5. mouseover/mouseenter/mouseout/mouseleave的区别

    mouseover:鼠标指针穿过被选元素或其子元素,均会触发事件 mouseenter:鼠标指针穿过被选元素时才触发事件 mouseout:鼠标指针离开被选元素或其子元素则触发事件 mouseleav ...

  6. 3.mouseenter和mouseover事件的区别

    <html> <head> <meta charset="UTF-8"> <script src="jquery-3.3.1.j ...

  7. mouseenter 与 mouseover 区别于选择

    mouseover事件, 箭头在子元素移动会触发冒泡事件,  子元素的鼠标箭头可触父元素方法, 相反,mouseenter事件功能与mouseover类似, 但鼠标进入某个元素不会冒泡触发父元素方法. ...

  8. mouseenter和hover的区别

    js中鼠标事件中,mouseenter和hover都可以达到,鼠标悬浮在目标上,触发事件,那么两者效果相同,有什么区别呢. 经过自己亲自试验.发现,mouseenter和hover还是有区别的. ho ...

  9. IE jquery mouseenter,mouseover超奇葩问题

    做了个项目,结构很简单 <div class="index-main" data-url="./img/index_default.jpg"> &l ...

随机推荐

  1. python练习册 每天一个小程序 第0008题

    1 # -*-coding:utf-8-*- 2 __author__ = 'Deen' 3 ''' 4 题目描述: 5 一个HTML文件,找出里面的正文. 6 7 思路: 8 利用Beautiful ...

  2. Java的浅克隆和深克隆

    如何实现对象的克隆 (1)实现 Cloneable 接口并重写 Object 类中的 clone() 方法: (2)实现 Serializable 接口,通过对象的序列化和反序列化实现克隆,可以实现真 ...

  3. 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 ...

  4. vue3.0的更新和defineProperty优化?

    放弃 Object.defineProperty ,使用更快的原生 Proxy (访问对象拦截器, 也成代理器) 提速, 降低内存使用, Tree-shaking更友好 支持IE11等 使用Types ...

  5. hashCode()方法的作用?

    hashCode()方法与equals()方法相似,都是来自java.lang.Object类的方法,都允许用户定义的子类重写这两个方法. 一般来说,equals这个方法是给用户调用的,如果你想根据自 ...

  6. js file对象 文件大小转换可视容易阅读的单位

    function returnFileSize(number) { if(number < 1024) { return number + 'bytes'; } else if(number & ...

  7. promethues常用的函数

    prometheus函数常用 时数据 (Instant vector): 包含一组时序,每个时序只有一个点,例如:http_requests_total区间数据 (Range vector): 包含一 ...

  8. IE中的编码位置

    进入设置 找到Editor 找到File Encodings

  9. (stm32学习总结)—LCD—液晶显示

    显示器简介 显示器属于计算机的 I/O 设备,即输入输出设备.它是一种将特定电子信息输出到屏幕上再反射到人眼的显示工具.常见的有 CRT 显示器.液晶显示器.LED 点阵显示器及OLED 显示器 本章 ...

  10. HTML5与HTML4区别简介

    移动互联网的快速发展,尤其是4G时代已经来临,加上微软在Windows 10中搭载了新的浏览器Edge取代了IE的地位,所以现在很多网站都开始抛弃IE朝着HTML5发展,PC端在不同浏览器之间的兼容性 ...