• 当鼠标移动到元素上时就会触发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. FrameScan-GUI CMS漏洞扫描

    工具简介 FrameScan-GUI是一款python3和Pyqt编写的具有图形化界面的cms漏洞检测框架,是FrameScan的加强版.支持多种检测方式,支持大多数CMS,可以自定义CMS类型及自行 ...

  2. Nginx配置不当（CRLF注入 、目录穿越）

    基于vulhub漏洞环境 环境搭建参考:https://blog.csdn.net/qq_36374896/article/details/84102101 1.漏洞名称 CRLF注入 2.漏洞原理 ...

  3. Java的浅克隆和深克隆

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

  4. 【Java分享客栈】Java程序员为争一口气熬夜硬刚CSS实现掘金首页

    前言 如果我做不了最厉害的Java工程师,那我就做Java工程师中最厉害的前端工程师. 前段时间,我默默给自己又喂了这碗心灵鸡汤-- 我不是很厉害的Java工程师,哪怕我已经工作八年,我依然觉得自己和 ...

  5. ctf之计算器

    题目信息如下: 打开环境,发现是一道简单的计算题 只能输入一位数字 F12查看源码发现作者将最大长度设置为1,我们将最大长度修改了即可 输入答案即可得到flag

  6. 搭建nuget服务器（二）：制作nuget包

    生成nuget包可以使用nuget.exe或者下载nuget package explorer工具 nuget package explorer 下载地址:https://github.com/NuG ...

  7. 深入理解RPC—序列化

    深入理解RPC-序列化 xiaofang233 2020-09-18 16:38:22 1024 收藏 6分类专栏: 分布式服务版权为什么需要序列化?首先,我们得知道什么是序列化与反序列化. 我们先回 ...

  8. SpringBoot项目意外出现 循环依赖和注入的对象意外是Null的问题 Requested bean is currently in creation: Is there an unresolvable circular reference? 或 nested exception is java.lang.NullPointerException

    1.Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with name ...

  9. kafka producer如何优化打入速度？

    增加线程 提高 batch.size 增加更多 producer 实例 增加 partition 数 设置 acks=-1 时,如果延迟增大:可以增大 num.replica.fetchers(fol ...

  10. 说说for循环的两种写法

    for循环 执行多次,条件写在()里,语法形式: 1 2 3 for(计数器变量;条件;计数器增减){ // 将要执行的代码 } 示例: 1 2 3 for (int i = 0; i < 5; ...