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. JS实现统一社会信用代码的效验(组织机构代码效验)

    参考原文https://blog.csdn.net/hdhxby/article/details/56015370 部分错误,修改整合了下 想查询数据的,请点击:统一信用代码查询地址 查看效验规则点击 ...

  2. vue---父子组件之间的通信【props，$refs、$emit】

    在用vue进行项目开发的时候,父子组件之间的通信是经常被用到的,下面就来具体说说父子组件通信的三种方式: 父组件: <template> <div> <h1>我是父 ...

  3. android 8.1 wifi提示"已连接 但无法访问互联网"的解决办法

    主要是GFW的问题 adb shell以下命令解决 settings put settings put settings put settings put global captive_portal_ ...

  4. centos6.10环境下启动多个redis实例

    # 启动redis端口6379的配置 [root@newcms:/usr/local/nginx/conf]# /etc/redis.conf daemonize yes pidfile /usr/l ...

  5. Qt开发经验小技巧51-60

    在某些http post数据的时候,如果采用的是&字符串连接的数据发送,中文解析乱码的话,需要将中文进行URL转码. QString content = "测试中文"; Q ...

  6. 怎样在sql server profiler跟踪时只显示自己关心的内容

    当我们想知道.net程序到底执行了哪些SQL的时候,通常会使用sql server profiler,但是如果不加设置,我们程序执行的sql通常会被系统的SQL淹没,通过以下的方法,可以只显示我们需要 ...

  7. VUE 同一页面路由参数变化，视图不刷新的解决方案

    1.监听路由处理 watch: { $route(to, from) { // 逻辑 // 重新调用数据接口 } }, 2.beforeRouteUpdate导航守卫 路由更新时触发 beforeRo ...

  8. linux内存管理swap分区

    一.什么是linux的内存机制? 我们知道,直接从物理内存读写数据要比从硬盘读写数据要快的多,因此,我们希望所有数据的读取和写入都在内存完成,而内存是有限的,这样就引出了物理内存与虚拟内存的概念. 物 ...

  9. netty的reactor模式

    reactor中包含5个核心结构,那么从操作系统低层次的调度来看5部分是这样的. (1)Handle(句柄资源描述符)本质是对客户端连接上来以后发生事件的处理机制,比如连接成功,读取数据,发送数据等状 ...

  10. 029 SSM综合练习05--数据后台管理系统--订单分页查询

    1.PageHelper介绍 PageHelper是国内非常优秀的一款开源的mybatis分页插件,它支持基本主流与常用的数据库,例如mysql.oracle.mariaDB.DB2.SQLite.H ...