zoukankan      html  css  js  c++  java

  • mouseover和mouseenter两个事件的区别

    mouseover(鼠标覆盖)

    mouseenter(鼠标进入)

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

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

    贴出代码:

    1. <!DOCTYPE html>
    2. <html>
    3.  
    4.     <head>
    5.         <meta charset="UTF-8">
    6.         <title></title>
    7.         <script type="text/javascript" src="js/jquery.min.js"></script>
    8.         <style>
    9.             .div1,
    10.             .div2,
    11.             .div3,
    12.             .div4 {
    13.                 width: 200px;
    14.                 height: 200px;
    15.             }
    16.             
    17.             .div1 {
    18.                 background: darkcyan;
    19.             }
    20.             
    21.             .div2 {
    22.                 background: violet;
    23.             }
    24.             
    25.             .div3 {
    26.                 background: darkgray;
    27.             }
    28.             
    29.             .div4 {
    30.                 background: darkgreen;
    31.             }
    32.             
    33.             p {
    34.                 width: 110px;
    35.                 height: 100px;
    36.                 background: aquamarine;
    37.                 margin: 0 auto;
    38.             }
    39.         </style>
    40.         <script>
    41.             x = 0;
    42.             y = 0;
    43.             z = 0;
    44.             w = 0;
    45.  
    46.             $(function() {
    47.                 $(".div1").on("mouseenter", function() {
    48.                     $("#s1").text(x += 1)
    49.                 })
    50.                 $(".div2").on("mouseover", function() {
    51.                     $("#s2").text(y += 1)
    52.                 })
    53.                 $(".div2").on("mouseover", function() {
    54.                     $("#s2").text(y += 1)
    55.                 })
    56.                 $(".div3").on("mouseenter", function() {
    57.                     $("#s3").text(z += 1)
    58.                 })
    59.                 $(".div4").on("mouseover", function() {
    60.  
    61.                     $("#s4").text(w += 1)
    62.                 })
    63.             })
    64.         </script>
    65.     </head>
    66.  
    67.     <body>
    68.         <div class="div1">
    69.             div1没有子元素(mouseenter)
    70.         </div>
    71.         <span id="s1"></span>
    72.         <div class="div2">
    73.             div2没有子元素(mouseover)
    74.         </div>
    75.         <span id="s2"></span>
    76.         <div class="div3">
    77.             <p id="p1"> div3有子元素p(mouseenter)</p>
    78.         </div>
    79.         <span id="s3"></span>
    80.         <div class="div4">
    81.             <p id="p2">div4有子元素p(mouseover)</p>
    82.         </div>
    83.         <span id="s4"></span>
    84.     </body>
    85.  
    86. </html>

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

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

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

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

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

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

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

    代码下载链接: 代码链接

    原文：https://blog.csdn.net/lplife/article/details/80436623
  • 相关阅读:
    《Graph Attention Network》阅读笔记
    Spark 中的机器学习库及示例
    Spark 中 RDD的运行机制
    Spark 的 python 编程环境
    1.10系统调用和库函数
    nginx中的configure脚本
    nginx中的main函数
    IPv4,IPv6套接字地址结构
    unix网络编程中的地址转换函数
    有关nginx中Strings模块中ngx_explicit_memzero()函数的死区消除优化问题
  • 原文地址：https://www.cnblogs.com/showcase/p/11274683.html
Copyright © 2011-2022 走看看