今天在使用鼠标事件时，用错了mouseout，于是做个测试总结。

结论：

mouseenter：当鼠标移入某元素时触发。

mouseleave：当鼠标移出某元素时触发。

mouseover：当鼠标移入某元素时触发，移入和移出其子元素时也会触发。

mouseout：当鼠标移出某元素时触发，移入和移出其子元素时也会触发。

mousemove：鼠标在某元素上移动时触发，即使在其子元素上也会触发。

mouseout、mouseover和mouseleave、mouseenter最大的区别，在于子元素连带触发。

例子：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

    .a{

      width: 500px;

      height: 500px;

      background: aliceblue;

    }

    .b{

      width: 200px;

      height: 200px;

      background: beige;

    }

    .c{

      width: 100px;

      height: 100px;

      background: violet;

    }

    </style>

</head>

<body>

    <div class="a">A

      <div class="b"

        onmouseenter="mouseenter()"

        onmouseleave="mouseleave()"

        onmouseout="mouseout()"

        onmouseover="mouseover()"

        onmousemove="mousemove()">B

        <div class="c">C

        </div>

      </div>

    </div>

    <script>

      function mouseenter(){

        console.log('mouseenter')

      }

      function mouseleave(){

        console.log('mouseleave')

      }

      function mouseout(){

        console.log('mouseout')

      }

      function mouseover(){

        console.log('mouseover')

      }

      function mousemove(){

        console.log('mousemove')

      }

    </script>

</body>

</html>

效果：

操作：

从A元素到C元素，再从C回到A，控制台输出如下：

演示地址：

http://htmlpreview.github.io/?https://github.com/codingforme/code-learn/blob/master/css-demo/mouse-event.html

mouseout、mouseover和mouseleave、mouseenter区别的更多相关文章

  1. jquery的hover mouseover mouseout mouseenter mouseleave的区别

    jquery的hover mouseover mouseout mouseenter mouseleave的区别 1.mouseover mouseout mouseover - 鼠标指针经过任何子元 ...

  2. mouseover，mouseout，mouseenter，mouseleave的区别

    相信做前端开发的都听说过“冒泡型事件”吧,<JavaScript高级程序设计>第九章有详细的讲述,但是,在学习的时候一知半解,也没详细去理解,导致最近在工作中碰到了问题:有许多 li 标签 ...

  3. mouseover,mouseout和mouseenter,mouseleave的区别及适用情况

    在做类似于百度地图右下角,不同地图切换UI时,遇到了问题. 就是鼠标滑过的时候出现一个层,当鼠标滑到当前层的话mouseover和mouseout在低版本的浏览器会出现闪动的现象,最简单的那就是把mo ...

  4. jquery mouseout mouseover 多次执行

    用jquery,mouseout,mouseover,随着鼠标移动,事件被触发了多次(冒泡),换成js onmouseover,onmouseout也是一样.最终的解决办法是,用jquery,mous ...

  5. mouseover,mouseout,mouseenter,mouseleave的区别

    1.前言 今天下午参加一个面试,对方问我写不写博客,这时候才猛然意识到好久没写东西了.最近一直在外边实习,每天有很多经历和挑战,但是却没有及时地记录下来,这一点必须得批评自己,以后得经常把自己遇到的问 ...

  6. mouseover和mouseenter，mouseout和mouseleave的区别-引发的探索

    相信小伙伴们都用过鼠标事件,比如mouseover和mouseout,mouseenter和mouseleave.它们都分别表示鼠标移入移出. 在使用的过程中,其实一直有个小疑问——它们之间究竟有什么 ...

  7. jQuery mouseover与mouseenter,mouseout与mouseleave的区别

    mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...

  8. mouseover与mouseenter与mousemove的区别mouseout与mouseleave的区别

    <html> <head> <title></title> </head> <body> <p> 当鼠标进入div1 ...

  9. 关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别

    轮播中大多会选择mouseover和mouseout  这个时候是没有任何问题的 但当遇到有css3动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...

随机推荐

  1. 状态压缩 - LeetCode #464 Can I Win

    动态规划是一种top-down求解模式,关键在于分解和求解子问题,然后根据子问题的解不断向上递推,得出最终解 因此dp涉及到保存每个计算过的子问题的解,这样当遇到同样的子问题时就不用继续向下求解而直接 ...

  2. org.hibernate.validator.constraints.NotBlank' validating type 'java.lang.Integer

    使用hibernate时,在save方法时,报了:org.hibernate.validator.constraints.NotBlank' validating type 'java.lang.In ...

  3. [NOIP]玩具装箱

    题目:(非常经典的模拟赛题,适合动规入门的OIer) 简要分析:   动态规划,用一维数组 f[i] 表示从位置1 到 位置i 的最优花费 ,由于 f[i ] 以前的最优花费都是确定的,故只需要在 1 ...

  4. Could not resolve view with name '***' in servlet with name 'dispatcher'

    今天在开发中遇到了一个问题,控制层使用的是SpringMVC框架. @RequestMapping("historyDetail") private String History( ...

  5. 输入一个A和B，,A<=B,A>=1,B<=pow(10,18)计算F=B!/A!结果的最后一位

    *************************************************************************代理运行函数,判断结果,进行输出*********** ...

  6. selenium 使用xpath定位不到

    <button id="" class="btn btn-some" type="submit"> <i class=&q ...

  7. java二进制相关基础

    转载请注明原创出处,谢谢! 说在前面 之前在JVM菜鸟进阶高手之路十(基础知识开场白)的时候简单提到了二进制相关问题,最近在看RocketMQ的源码的时候,发现涉及二进制的内容蛮多,jdk源码里面也是 ...

  8. dedecms注入漏洞

    版本:Powered by DedeCMSV57_GBK © 2004-2011 DesDev Inc. 漏洞利用EXP:plus/recommend.php?action=&aid=1&am ...

  9. eclipse 常用插件 整理

    开发过程中的常用Eclipse插件,按字母排序: (1)    AmaterasUML        介绍:Eclipse的UML插件,支持UML活动图,class图,sequence图,usecas ...

  10. 打开和创建SqlCe（.sdf文件）

    打开SqlCe的工具有些少,目前能看到Vs2010安装插件之后打开.sdf文件 [转载]https://weblogs.asp.net/scottgu/vs-2010-sp1-and-sql-ce 需 ...