• 当鼠标移动到元素上时就会触发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. vue路由-router

    VueRouter基础 vue路由的注册 导入 <script src="https://unpkg.com/vue-router/dist/vue-router.js"&g ...

  2. HashMap集合类 5种最佳遍历方式

    1. 使用 Iterator 遍历 HashMap EntrySet 2. 使用 Iterator 遍历 HashMap KeySet 3. 使用 For-each 循环迭代 HashMap 4. 使 ...

  3. 知识点简单总结——Pollard-Rho算法

    知识点简单总结--Pollard-Rho算法 MillerRabin算法 用于对较大(int64)范围内的数判定质数. 原理:费马小定理,二次探测定理. 二次探测定理:若 $ p $ 为奇素数且 $ ...

  4. sqlserver下载地址及密匙

    SqlServer 2017 下载地址及密钥 下载地址: ed2k://|file|cn_sql_server_2017_developer_x64_dvd_11296175.iso|17697771 ...

  5. 如何处理异形屏iphone X?

    safe area: 默认放置在安全区域以避免遮挡, 但会压缩 在meta中添加viewport-fit=cover: 告诉浏览器要讲整个页面渲染到浏览器中,不管设备是圆角与否,这个时候会造成页面的元 ...

  6. kafka的message格式是什么样的？

    一个Kafka的Message由一个固定长度的header和一个变长的消息体body组成 header部分由一个字节的magic(文件格式)和四个字节的CRC32(用于判断body消息体是否正常)构成 ...

  7. Linux下安装jdk-7u67-linux-x64.rpm

    1.新建一个jdk的安装目录,我这里是在/usr/下新建了java目录,我是使用WinSCP创建的文件夹,把 jdk-7u80-linux-x64.tar.gz压缩包从本地Windows系统中拖到Li ...

  8. js技术之分割split()

    案例:把所有单词以空格为分割并将首字母转为大写 <!DOCTYPE html><html lang="en"><head> <meta c ...

  9. IDEA问题之“微服务启动项目时，不会加载Spring Boot到Services中”

    1.启动项目时,不会加载Spring Boot到Services中 现象解析: 启动项目时 会在debug的位置加载项目 注:这里没有配图,因为问题已解决,未记录图,需往后遇到记录 解决方案: 需要在 ...

  10. spi详解

    来源:https://www.sohu.com/a/211324861_468626 1. SPI简介 SPI,是英语Serial Peripheral interface的缩写,顾名思义就是串行外围 ...