zoukankan      html  css  js  c++  java
  • jquery mouseover与mouseenter,mouserout与mouseleave的区别

    mouseover与mouseenter
    不论鼠标指针穿过被选元素或其子元素,都会触发mouseover事件
    只有在鼠标指针穿过被选元素时,才会触发mouseenter事件

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
    <script type="text/javascript">
    x=0;
    y=0;
    $(document).ready(function(){
      $("div.over").mouseover(function(){
        $(".over span").text(x+=1);
      });
      $("div.enter").mouseenter(function(){
        $(".enter span").text(y+=1);
      });
    });
    </script>
    </head>
    <body>
    <p>不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。</p>
    <p>只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。</p>
    <div class="over" style="background-color:lightgray;padding:20px;40%;float:left">
    <h2 style="background-color:white;">被触发的 Mouseover 事件:<span></span></h2>
    </div>
    <div class="enter" style="background-color:lightgray;padding:20px;40%;float:right">
    <h2 style="background-color:white;">被触发的 Mouseenter 事件:<span></span></h2>
    </div>
    </body>
    </html>
    View Code

    mouseout与mouseleave
    不论鼠标指针离开被选元素还是任何子元素,都会触发mouseout事件
    只有在鼠标指针离开被选元素时,才会触发mouseleave事件。

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
    <script type="text/javascript">
    x=0;
    y=0;
    $(document).ready(function(){
      $("div.over").mouseleave(function(){
        $(".over span").text(x+=1);
      });
      $("div.enter").mouseout(function(){
        $(".enter span").text(y+=1);
      });
    });
    </script>
    </head>
    <body>
    <p>不论鼠标指针离开被选元素或任何子元素,都会触发 mouseout 事件。</p>
    <p>只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。</p>
    <div class="over" style="background-color:lightgray;padding:20px;40%;float:left">
    <h2 style="background-color:white;">被触发的 Mouseover 事件:<span></span></h2>
    </div>
    <div class="enter" style="background-color:lightgray;padding:20px;40%;float:right">
    <h2 style="background-color:white;">被触发的 Mouseenter 事件:<span></span></h2>
    </div>
    </body>
    </html>
    View Code
  • 相关阅读:
    常用学习网站 (转载)
    Cookie 与 Session 的区别(转载)
    Asp.net 控件ClientID,UniqueID命名规则问题
    HTTP POST GET 本质区别详解
    asp net中的状态管理的方式有哪几种分别有哪些优势和缺点
    http 协议 (转载)
    Java 学习 (转载)
    数据库日常维护常用的脚本部分收录(转载)
    ASP.NET页面与IIS底层交互和工作原理详解(转载)
    Web网站的性能测试工具(转载)
  • 原文地址:https://www.cnblogs.com/ron123/p/3759994.html
Copyright © 2011-2022 走看看