zoukankan      html  css  js  c++  java
  • mouseout和mouseleave的区别

    经常用mouseout来隐藏一个原素,但是当隐藏元素有多个层级时候,发现mouseout会重复多次发生。这是因为mouseout会对子元素的移出事件也有响应,这时候可以试试mouseleave。

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    x=0;
    y=0;
    $(document).ready(function(){
      $("div.out").mouseout(function(){
        $(".out span").text(x+=1);
      });
      $("div.leave").mouseleave(function(){
        $(".leave span").text(y+=1);
      });
    });
    </script>
    </head>
    <body>
    <p>不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。</p>
    <p>只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。</p>
    <div class="out" style="background-color:lightgray;padding:20px;40%;float:left">
    <h2 style="background-color:white;">被触发的 Mouseout 事件:<span></span></h2>
    </div>
    <div class="leave" style="background-color:lightgray;padding:20px;40%;float:right">
    <h2 style="background-color:white;">被触发的 Mouseleave 事件:<span></span></h2>
    </div>
    </body>
    </html>
  • 相关阅读:
    剑指offer(链表)
    设计模式
    谷歌Colab使用(深度学习)
    Consul与python API注册与注销
    【日志收集】之Loki
    【消息队列】之 RabbitMQ安装
    【消息队列】之NSQ安装
    Docker基础
    Python3 , Mysql5.7 , Smb 安装
    SkyWalking部署
  • 原文地址:https://www.cnblogs.com/fengsui/p/4342413.html
Copyright © 2011-2022 走看看