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. php-7.3.4 configure: error: Please reinstall the libzip distribution

    php-7.3.4 configure: error: Please reinstall the libzip distribution # wget https://libzip.org/downl ...

  2. mysql 日期自动自动添加及更新为当前时间

    1. 虽然mysql中日期时间类型比较多,但是支持默认值的类型只有timestamp,详见这里. 2. 希望新增记录时自动写入当前时间,建表语句如下: `create_time` timestamp ...

  3. jstl标签库使用报错index_jsp.java找不到问题

    初学jstl的时候记得只需要讲jstl和standard的jar放在lib下面,然后jsp中使用对应导入语法就可以使用标签库了. 但那时候用的是myeclipes,myeclipes的导包的过程记得是 ...

  4. C++ int double float对应的长度以及二进制

    #include <iostream> using namespace std; void showIntBit(int a); void showDoubleBit(double a1) ...

  5. spring 支持集中 bean scope？

    Spring bean 支持 5 种 scope: Singleton - 每个 Spring IoC 容器仅有一个单实例. Prototype - 每次请求都会产生一个新的实例. Request - ...

  6. 在Windows平台下使用Gitblit搭建Git服务器图文解说

    Windows平台下Git服务器搭建 一.java环境变量的设置 下载jdk并配置jdk的环境变量,JAVA_HOME,CLASSPATH以及PATH,最后在DOS窗口输入java -version检 ...

  7. 伪造他人账号信息提交数据问题(一般接口都会去校验身份和身份id是否一致)

    某APP客户端可以劫持任意账号 双师: 上课的学生上报学生上课状态,请求中带学生自己的id,当切换成其他学生的id ,接口报错,应该会校验token 和 提交的学生id 是否一致

  8. IDEA 2018.3.5，修改js文件，html页面不及时更新

    问题描述 使用IDEA 开发时,修改js文件,前端页面不能及时更新. 解决方法: 1. IDEA settings--> Compiler --> Build project automa ...

  9. [LOJ3053]希望

    对于一组$s_{1\cdots k}$,合法的$u$构成一个连通块,满足$\left\lvert V\right\rvert-\left\lvert E\right\rvert=1$ 考虑算出算$f_ ...

  10. phpstorm打开报错方法

    phpstorm打开报错方法 直接删掉默认文件夹里的idea文件夹 重新打开就可以了