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. hive函数 get_json_object

    pandas和SQL数据分析实战 https://study.163.com/course/courseMain.htm?courseId=1006383008&share=2&sha ...

  2. github加速

    访问 https://www.ipaddress.com/ 找到以下网址对应的ip,在本地hosts里面映射,或者到路由器内映射好即可. github.com assets-cdn.github.co ...

  3. 泡泡一分钟：Collaborative Mapping with Pose Uncertainties using different Radio Frequencies and Communication Modules

    张宁 Collaborative Mapping with Pose Uncertainties using different Radio Frequencies and Communication ...

  4. OpenShift 4.1 演示

    功能演示主要包含三个方面. 1. 管理控制台 push镜像发布应用 podman build -t mytomcat:slim . podman tag localhost/mytomcat:slim ...

  5. Doker容器部署Tomcat服务器

    1.拉取tomcat服务镜像文件 root@ubuntu:~# docker pull registry.cn-hangzhou.aliyuncs.com/xxxx/xxxxx:web web: Pu ...

  6. [Tool] Give some magic ! 那些奇思妙想的 Chrome 插件

    [ Reggy ] - 网站注册类自动填充临时信息,Magic! 但是对于非常规的网站无效.是什么意思呢? 就是说,它不是常规的 form 表单,而是使用 Js 操作数据,所以任何插件都无法自动识别. ...

  7. java上传文件类型检测

    在进行文件上传时,特别是向普通用户开放文件上传功能时,需要对上传文件的格式进行控制,以防止黑客将病毒脚本上传.单纯的将文件名的类型进行截取的方式非常容易遭到破解,上传者只需要将病毒改换文件名便可以完成 ...

  8. 递归下降和LL(1)语法分析

    什么是自顶向下分析法 在语法分析过程中一般有两种语法分析方法,自顶向下和自底向上,递归下降分析和LL(1)都属于是自顶向下的语法分析 自顶向下分析法的过程就像从第一个非终结符作为根节点开始根据产生式进 ...

  9. [转]python file文件操作--内置对象open

    python file文件操作--内置对象open   说明: 1. 函数功能打开一个文件,返回一个文件读写对象,然后可以对文件进行相应读写操作. 2. file参数表示的需要打开文件的相对路径(当前 ...

  10. ThinkPHP3开发模式，控制器操作，配置文件，框架语法

    ThinkPHP的开发模式 tp框架有两种使用模式:开发模式(调试模式),一种是生产模式(运行模式) define('APP_DEBUG', true);  //调试模式 define('APP_DE ...