• 当鼠标移动到元素上时就会触发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. (leetcode)二叉树的层次遍历-c语言实现

    这段代码,在后面跑测试用例时,出现了stack-overflow,但是原因还不清楚. 问题如下:  二叉树的层次遍历   给定一个二叉树,返回其按层次遍历的节点值. (即逐层地,从左到右访问所有节点) ...

  2. [SniperOJ](web)图书管理系统 注入 源码泄露

    0x00 题目概况 题目地址:http://www.sniperoj.cn:10000/ 这是一道注入题,存在git源码泄露,使用githack(freebuf有工具介绍)把源码脱下来,进行审计,然后 ...

  3. 多线程笔记（学习尚硅谷java基础教程）

    一.基本概念: 程序: 是为完成特定任务.用某种语言编写的一组指令的集合.即指一段静态的代码,静态对象. 进程: 是程序的一次执行过程,或是正在运行的一个程序.是一个动态的过程:有它自身的产生.存在和 ...

  4. 『忘了再学』Shell基础 — 5、Bash基本功能（命令的别名和常用快捷键）

    目录 1.给命令设置别名 (1)设置别名的命令格式 (2)命令别名永久生效 (3)别名的优先级 2.Bash常用快捷键 1.给命令设置别名 Linux系统的命令别名我们之前已经说过了,这里再过一边. ...

  5. @Autowired 注解？

    @Autowired 注解提供了更细粒度的控制,包括在何处以及如何完成自动装配.它的用法和@Required一样,修饰setter方法.构造器.属性或者具有任意名称和/或多个参数的PN方法.

  6. 在Java中，如何跳出当前的多重嵌套循环？

    答:在最外层循环前加一个标记如A,然后用break A;可以跳出多重循环.(Java中支持带标签的break和continue语句,作用有点类似于C和C++中的goto语句,但是就像要避免使用goto ...

  7. springmvc对参数接收的两个注解@RequestParam和@RequestBody

    @RequestParam 作用:将请求参数绑定到控制器的方法参数上,主要用于接收几班类型参数 语法:@RequestParam(value="参数名",required=&quo ...

  8. memcached 最大的优势是什么？

    Memcached 最大的好处就是它带来了极佳的水平可扩展性,特别是在一个巨大的 系统中.由于客户端自己做了一次哈希,那么我们很容易增加大量 memcached 到集群中.memcached 之间没有 ...

  9. js中一个函数调用另一个函数变量；判断鼠标按住/手指左右滑动

    <script> function myFunction() { var x1=event.clientX;//只需要将被调用的变量前的var删除即可在下个函数调用: document.g ...

  10. fetch，终于认识你

    fetch和XMLHttpRequest 如果看网上的fetch教程,会首先对比XMLHttpRequest和fetch的优劣,然后引出一堆看了很快会忘记的内容(本人记性不好).因此,我写一篇关于fe ...