mouseover(鼠标覆盖)

mouseenter(鼠标进入)

二者的本质区别在于,mouseenter不会冒泡,简单的说,它不会被它本身的子元素的状态影响到.但是mouseover就会被它的子元素影响到,在触发子元素的时候,mouseover会冒泡触发它的父元素.(想要阻止mouseover的冒泡事件就用mouseenter)

共同点:当二者都没有子元素时,二者的行为是一致的,但是二者内部都包含子元素时,行为就不同了.

贴出代码:



  1. 

    

    

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    

    

    <html>
    

    3. 

  3. 

    

    

    

     
    

    4. 

  4. 

    

    

    

        <head>
    

    5. 

  5. 

    

    

    

            <meta charset="UTF-8">
    

    6. 

  6. 

    

    

    

            <title></title>
    

    7. 

  7. 

    

    

    

            <script type="text/javascript" src="js/jquery.min.js"></script>
    

    8. 

  8. 

    

    

    

            <style>
    

    9. 

  9. 

    

    

    

                .div1,
    

    10. 

  10. 

    

    

    

                .div2,
    

    11. 

  11. 

    

    

    

                .div3,
    

    12. 

  12. 

    

    

    

                .div4 {
    

    13. 

  13. 

    

    

    

                    width: 200px;
    

    14. 

  14. 

    

    

    

                    height: 200px;
    

    15. 

  15. 

    

    

    

                }
    

    16. 

  16. 

    

    

    

                
    

    17. 

  17. 

    

    

    

                .div1 {
    

    18. 

  18. 

    

    

    

                    background: darkcyan;
    

    19. 

  19. 

    

    

    

                }
    

    20. 

  20. 

    

    

    

                
    

    21. 

  21. 

    

    

    

                .div2 {
    

    22. 

  22. 

    

    

    

                    background: violet;
    

    23. 

  23. 

    

    

    

                }
    

    24. 

  24. 

    

    

    

                
    

    25. 

  25. 

    

    

    

                .div3 {
    

    26. 

  26. 

    

    

    

                    background: darkgray;
    

    27. 

  27. 

    

    

    

                }
    

    28. 

  28. 

    

    

    

                
    

    29. 

  29. 

    

    

    

                .div4 {
    

    30. 

  30. 

    

    

    

                    background: darkgreen;
    

    31. 

  31. 

    

    

    

                }
    

    32. 

  32. 

    

    

    

                
    

    33. 

  33. 

    

    

    

                p {
    

    34. 

  34. 

    

    

    

                    width: 110px;
    

    35. 

  35. 

    

    

    

                    height: 100px;
    

    36. 

  36. 

    

    

    

                    background: aquamarine;
    

    37. 

  37. 

    

    

    

                    margin: 0 auto;
    

    38. 

  38. 

    

    

    

                }
    

    39. 

  39. 

    

    

    

            </style>
    

    40. 

  40. 

    

    

    

            <script>
    

    41. 

  41. 

    

    

    

                x = 0;
    

    42. 

  42. 

    

    

    

                y = 0;
    

    43. 

  43. 

    

    

    

                z = 0;
    

    44. 

  44. 

    

    

    

                w = 0;
    

    45. 

  45. 

    

    

    

     
    

    46. 

  46. 

    

    

    

                $(function() {
    

    47. 

  47. 

    

    

    

                    $(".div1").on("mouseenter", function() {
    

    48. 

  48. 

    

    

    

                        $("#s1").text(x += 1)
    

    49. 

  49. 

    

    

    

                    })
    

    50. 

  50. 

    

    

    

                    $(".div2").on("mouseover", function() {
    

    51. 

  51. 

    

    

    

                        $("#s2").text(y += 1)
    

    52. 

  52. 

    

    

    

                    })
    

    53. 

  53. 

    

    

    

                    $(".div2").on("mouseover", function() {
    

    54. 

  54. 

    

    

    

                        $("#s2").text(y += 1)
    

    55. 

  55. 

    

    

    

                    })
    

    56. 

  56. 

    

    

    

                    $(".div3").on("mouseenter", function() {
    

    57. 

  57. 

    

    

    

                        $("#s3").text(z += 1)
    

    58. 

  58. 

    

    

    

                    })
    

    59. 

  59. 

    

    

    

                    $(".div4").on("mouseover", function() {
    

    60. 

  60. 

    

    

    

     
    

    61. 

  61. 

    

    

    

                        $("#s4").text(w += 1)
    

    62. 

  62. 

    

    

    

                    })
    

    63. 

  63. 

    

    

    

                })
    

    64. 

  64. 

    

    

    

            </script>
    

    65. 

  65. 

    

    

    

        </head>
    

    66. 

  66. 

    

    

    

     
    

    67. 

  67. 

    

    

    

        <body>
    

    68. 

  68. 

    

    

    

            <div class="div1">
    

    69. 

  69. 

    

    

    

                div1没有子元素(mouseenter)
    

    70. 

  70. 

    

    

    

            </div>
    

    71. 

  71. 

    

    

    

            <span id="s1"></span>
    

    72. 

  72. 

    

    

    

            <div class="div2">
    

    73. 

  73. 

    

    

    

                div2没有子元素(mouseover)
    

    74. 

  74. 

    

    

    

            </div>
    

    75. 

  75. 

    

    

    

            <span id="s2"></span>
    

    76. 

  76. 

    

    

    

            <div class="div3">
    

    77. 

  77. 

    

    

    

                <p id="p1"> div3有子元素p(mouseenter)</p>
    

    78. 

  78. 

    

    

    

            </div>
    

    79. 

  79. 

    

    

    

            <span id="s3"></span>
    

    80. 

  80. 

    

    

    

            <div class="div4">
    

    81. 

  81. 

    

    

    

                <p id="p2">div4有子元素p(mouseover)</p>
    

    82. 

  82. 

    

    

    

            </div>
    

    83. 

  83. 

    

    

    

            <span id="s4"></span>
    

    84. 

  84. 

    

    

    

        </body>
    

    85. 

  85. 

    

    

    

     
    

    86. 

  86. 

    

    

    

    </html>

先测试一下div1和div2都是没有子元素的情况,看下面动图

可以看到当div没有子元素的时候,两者在鼠标覆盖或者进入的时候行为一样.

接下来看一下有子元素的div3和div4,如下动图

可以看到在有子元素的div3在mouseenter也不会触发div3

但是div4就会被在它的子元素被覆盖的时候被触发了,也就是产生了冒泡

最后注意:mouseenter就是在想要阻止冒泡事件发生的时候使用

把代码复制复制粘贴下来自己测试一下就明白了,不过注意: jquery需要的包你需要引入,不然是没有效果的.

代码下载链接: 代码链接

原文：https://blog.csdn.net/lplife/article/details/80436623

mouseover和mouseenter两个事件的区别的更多相关文章

  1. jQuery-使用hover(fn,fn)函数监听mouseover和mouseout两个事件

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

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

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

  3. mouseover与mouseenter,mouseout与mouseleave的区别

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

  4. 曾经跳过的坑----jQuery mouseover与mouseenter,mouseout与mouseleave的区别

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

  5. jQuery里的mouseover与mouseenter事件类型区别

    JQ里面有mouseover和mouseenter  2个事件类型干着差不多的活,用不好经常出现些小问题. 今天我解释一下原理: 事件类型翻译: mouseover 鼠标移上 mouseenter 鼠 ...

  6. mouseover和mouseenter的区别

    mouseover和mouseenter都是鼠标事件. mouseover事件,当鼠标穿过被选元素的时候,若此元素有子元素,子元素也会被触发此事件.即是使用mouseover事件,会多次触发此元素. ...

  7. 事件处理& 事件委托& 区别mouseover与mouseenter

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

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

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

  9. 一个例子说明mouseover事件与mouseenter事件的区别

    <html> <head> <meta charset="UTF-8"> <title>haha</title> < ...

随机推荐

  1. WireMock和Spring MVC模拟器

    WireMock和Spring MVC模拟器 Spring Cloud Contract提供了一个方便的类,可以将JSON WireMock存根加载到Spring MockRestServiceSer ...

  2. vmware ubuntu16 启动蓝屏屏幕闪

    vmware ubuntu16 启动蓝屏屏幕闪 虚拟机安装了ubuntu16 desktop,没有关闭自动更新: 结果关机虚拟机时出现等5秒更新,类似win10关机更新: 再开机发现就蓝屏了,多次重启 ...

  3. Android外接USB扫码枪

    公司的设备以前接入的都是串口的扫码头,优点是直接通过串口读取流里面的数据就OK了,缺点是你需要知道每一款扫码器的型号以获取波特率及Android设备的串口地址.因为现在usb扫码器越来越方便且即插即用 ...

  4. springmvc@RequestMapping-params参数规则

    springmvc@RequestMapping-params参数规则 https://blog.csdn.net/qq_33439525/article/details/78193190 版权声明: ...

  5. 基于Vue SEO的四种方案

    基于Vue SEO的四种方案 https://segmentfault.com/a/1190000019623624?utm_source=tag-newest

  6. java面试题实战二

    1.spring 是如何创建bean的? 在IoC容器中,bean的获取主要通过BeanFactory和ApplicationContext获取,这里ApplicationContext实际上是继承自 ...

  7. 为什么java里面经常作List判断的时候，既要判断list不为null，又要判断size>0呢？

    没有考虑到具体的问题上面,我们单纯的来讲: 为什么java里面经常作List判断的时候,既要判断list不为null,又要判断size>0呢? list == null 说明list没有初始化( ...

  8. Mybatis出错： Cause: org.apache.ibatis.reflection.ReflectionException: Error instantiating class com.cyf.pojo.User with invalid types () or values ()

    org.apache.ibatis.exceptions.PersistenceException: ### Error querying database. Cause: org.apache.ib ...

  9. mysql组合索引的有序性<转>

    昨天同事关于军规里的一条mysql索引的问题咨询我,才发现自己也不太了解组合索引的规则.于是来记录一下: [推荐]如果有order by的场景,请注意利用索引的有序性.order by 最后的字段是组 ...

  10. ubuntu下编译C++程序

    1.CMake 定义:CMake是一个跨平台编译工具,可以用来自动输出makefile文件: 用法:(1)想要自动生成makefile,还需要编写对应的CMakeLists.txt文件: (2)在CM ...