• 当鼠标移动到元素上时就会触发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 的区别的更多相关文章

  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. Rafy 框架：领域控制器

    本文简要说明如何使用 Rafy 框架中的领域控制器. 简介 领域控制器是 Rafy 框架中用于封装领域逻辑的主要方式. 在控制器中,开发者可以封装大量的业务逻辑,并向外暴露业务接口.内部的逻辑在实现时 ...

  2. 网络传输中的各种加密算法+SSL+CA证书详解

    1. 数据传输分类 在互联网上数据传输有两种:明文传输和加密传输.明文传输的协议有:ftp.http.smtp.telnet.但是为了数据的完整性和安全性,所以后来引用了加密等相关手段来保证数据的安全 ...

  3. KVM虚拟机cpu资源限制和vcpu亲缘性绑定

    前言 KVM中添加的实例存在资源分布不均的情况,这样如果有消耗资源的实例会影响到其他实例的服务正常运行,所以给kvm做资源限制是很有必要的,下面记录一下在centos7中KVM环境下使用cgroup限 ...

  4. 序列化与反序列化、def的介绍与快速使用、cbv源码分析、APIView与request对象分析

    今日内容概要 序列化与反序列化 def介绍和快速使用 cbv源码流程分析 drf之APIView和Request对象分析 内容详细 1.序列化和反序列化 # api接口开发 最核心最常见的一个过程就是 ...

  5. 整理分布式锁：业务场景&分布式锁家族&实现原理

    1.引入业务场景 业务场景一出现: 因为小T刚接手项目,正在吭哧吭哧对熟悉着代码.部署架构.在看代码过程中发现,下单这块代码可能会出现问题,这可是分布式部署的,如果多个用户同时购买同一个商品,就可能导 ...

  6. List 和 Map 区别?

    表面来看,List是一个只是存放单个元素的集合,List集合所包含的元素可以重复,元素按放入的先后顺序来存放,程序可以通过元素的索引来读取元素,因此List相当于一个动态数组:Map则是一个存放key ...

  7. 什么是SpringCloudConfig?

    在分布式系统中,由于服务数量巨多,为了方便服务配置文件统一管理,实时更新,所以需要分布式配置中心组件.在Spring Cloud中,有分布式配置中心组件spring cloud config ,它支持 ...

  8. SpringBoot的 Actuator 是做什么的？

    本质上,Actuator 通过启用 production-ready 功能使得 SpringBoot 应用程序变得更有生命力.这些功能允许我们对生产环境中的应用程序进行监视和管理. 集成 Spring ...

  9. spring-boot-learning-Web开发-深入理解springMVC

    处理器映射 11spring启动阶段就会将@RequestMapping所配置的内容保存到处理器映射HandlerMapping机制中去 22等待请求,通过拦截器拦截请求信息与HandlerMappi ...

  10. spring-boot-learning自动配置原理

    启动器: spring-boot-starter:spring-boot场景启动器,帮我们倒入我们场景需要的组件依赖 不同的场景有不同的启动器: spring-boot-starter-web     ...