• 当鼠标移动到元素上时就会触发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. 冒泡排序和鸡尾酒排序(code)

    昨天回顾了下冒泡排序和鸡尾酒排序,用面向对象的方式写了一下,并且优化了代码,记录一下~ 一.冒泡排序 # 冒泡排序 class BubbleSort(object): def __init__(sel ...

  2. [XNUCA 进阶篇](web)writeup

    XNUCA 靶场练习题writeup default 阳关总在风雨后 题目过滤很多,*,#,/ ,and,or,|,union,空格,都不能用 盲注,最后的姿势是:1'%(1)%'1 中间的括号的位置 ...

  3. python练习册 每天一个小程序 第0006题

    1 # -*-coding:utf-8-*- 2 __author__ = 'Deen' 3 ''' 4 题目描述: 5 你有一个目录,放了你一个月的日记,都是 txt,为了避免分词的问题,假设内容都 ...

  4. PCIe Tandem PROM 方法

    PCIe Tandem PROM 方法 什么是Tandem PROM? 简单总结:市面多数的FPGA都是SRAM型,需要在上电时从外部存储器件完成代码的加载,对于具有PCIe功能的SRAM FPGA而 ...

  5. lucence 内部结构是什么？

    面试官:想了解你的知识面的广度和深度. 解答: Lucene 是有索引和搜索的两个过程,包含索引创建,索引,搜索三个要点.可以 基于这个脉络展开一些. 最近面试一些公司,被问到的关于 Elastics ...

  6. web.xml---配置文件概要

    web.xml分发器: case1: springMvc的分发器: 作用:将匹配上的请求交由springMvc处理,路径会继续到达springMvc的处理器映射器 <servlet> &l ...

  7. springboot服务引入外部jar包在windows运行正常，在linux环境上无法加载到引入jar包的类

    一.问题描述 最近开发了一个springboot程序,需要依赖第三方jar包,这个jar包无法直接通过pom远程仓库下载,需要从自己本地引入,于是配置pom文件如下:将本地jar包引入工程,syste ...

  8. Oracle入门基础（十二）一一储存过程及触发器

    1.第一个存储过程 打印Hello World 调用存储过程: 1.exec sayhelloworld(); 2.begin sayhelloworld(); sayhelloworld(); en ...

  9. 学习 Haproxy （四）

    一. haproxy 的安装配置 # cat /etc/redhat-release CentOS release 6.6 (Final) # uname -r 2.6.32-504.el6.i686 ...

  10. CPF 使用C#的Native AOT 发布程序

    微软已经将AOT的包移到Nuget了,之前是在实验测试服务器上的.并且由之前的alpha版本改成了preview版本. C#的开发效率,接近C++的运行效率,而且可以防止反编译,可以支持大部分反射功能 ...