• 当鼠标移动到元素上时就会触发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. weblogic重要漏洞记录

    (PS:之前在freebuf发过,这里直接复制过来的,所以有些图片会有水印) 前言 T3协议存在多个反序列化漏洞CVE-2015-4852/CVE-2016-0638/CVE-2016-3510/CV ...

  2. 通过DP总线实现S7-300/400与SINAMICS S120 通讯

    一.DP总线通讯功能概述 S7-300/400与SINAMICS S120 之间通过DP总线可进行周期性及非周期性数据通讯. 使用标准S7功能块SFC14/SFC15,S7-300/400PLC通过P ...

  3. S120的基本定位功能

    转自:https://support.industry.siemens.com/cs/document/84136148/s120%E7%9A%84%E5%9F%BA%E6%9C%AC%E5%AE%9 ...

  4. 记-Windows环境下Prometheus+alertmanager+windows_exporter+mtail监控部署

    1.概述 最近因项目需要统计服务的负载情况及机器的负载情况,但是项目里面却没有相关统计而服务所在的机器也没有相关的监控,因为工期原因就选择了相对轻量级的prometheus方案.其中windows_e ...

  5. 深入理解RPC—序列化

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

  6. Mysql查询优化器之关于JOIN的优化

    连接查询应该是比较常用的查询方式,连接查询大致分为:内连接.外连接(左连接和右连接).自然连接 下图展示了 LEFT JOIN.RIGHT JOIN.INNER JOIN.OUTER JOIN 相关的 ...

  7. BIO、NIO、AIO的区别

    一.基本概念 1.BIO:同步阻塞IO 2.NIO:同步非阻塞IO 3.AIO:异步阻塞IO IO操作包括两部分,发起IO请求.IO数据读写.阻塞非阻塞主要针对线程发起IO请求之后是否立即返回来定义的 ...

  8. Eclipse创建Spring XML配置文件插件

    引用:https://www.cnblogs.com/lideqiang/p/9067219.html 第一步:在 Eclipse Marketplace仓库中,搜索sts 第二步:安装Spring ...

  9. SVN回滚步骤

  10. 攻防世界杂项MISCall

    MISCall 下载下来是一个附件但是不清楚他是个什么东西我先拉入kali看看 发现是一个tar包不过这个包我们需要使用以下的指令来解压 tar -xjvf d02f31b893164d56b7a8e ...