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. Schema注册表客户端

    Schema注册表客户端 与模式注册表服务器交互的客户端抽象是SchemaRegistryClient接口,具有以下结构: public interface SchemaRegistryClient ...

  2. Go1.13 标准库的 http 包爆出重大 bug，你的项目中招了吗？ 原创： 王亚楼 Go语言中文网 今天

    Go1.13 标准库的 http 包爆出重大 bug,你的项目中招了吗? 原创: 王亚楼 Go语言中文网 今天

  3. ContentProvider数据库共享之——实例讲解

      版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/harvic880925/article/details/44591631 前言:现在这段时间没这 ...

  4. thinkphp5---路由问题

    在做thinkphp的开发项目中,遇到一个需求:要求让网站的链接,必须以 .html结尾. 原因:在thinkphp开发的项目中,使用伪静态,路由格式:xxx.com/xxx/2.html ,但是后面 ...

  5. Xcodebuild稳定性测试go脚本

    [本文出自天外归云的博客园] 简单封装下xcodebuild test命令,写一个执行xcode测试的go程序,可以设定单case执行次数,也可以二次组装调用进行多个case的测试,代码如下: pac ...

  6. android mk 预编译库

    LOCAL_PATH := $(call my-dir) #include $(CLEAR_VARS) # OpenCV #OPENCV_CAMERA_MODULES:=on #OPENCV_INST ...

  7. LeetCode_448. Find All Numbers Disappeared in an Array

    448. Find All Numbers Disappeared in an Array Easy Given an array of integers where 1 ≤ a[i] ≤ n (n  ...

  8. IDEA中Lombok插件的安装及使用

    这个插件的好处在于可以让我们的代码更简洁,减少一些重复的工作,最常用的就是@Data注解,比如在实体类上使用@Data注解,实体类的各个属性就不需要书写get和set方法. 安装方法: 1.File→ ...

  9. webpack四个基础概念

    本文参考自:https://www.cnblogs.com/xiaohuochai/p/7002344.html webpack 核心概念:入口(entry).输出(output).加载器(loade ...

  10. SpringBoot之@EnableAutoConfiguration注解

    源地址:https://blog.csdn.net/zxc123e/article/details/80222967 虽然定义使用了多个Annotation进行了原信息标注,但实际上重要的只有三个An ...