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>
  • 相关阅读:
    AJAX学习笔记
    JQuery 学习笔记-2017.05.22
    十二.GUI
    十一.文件
    十.模块和库
    九.类的进化(魔法方法、特性和迭代器)
    八.异常
    七.类的继承
    六.函数和类
    五.条件、循环和其他语句
  • 原文地址:https://www.cnblogs.com/fengsui/p/4342413.html
Copyright © 2011-2022 走看看