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
  • 相关阅读:
    一 基础--进制转化
    七牛云上传视频并截取第一帧为图片(js实现)
    FNScanner二维码接口openView自定义扫码Demo
    UIPickerView 模块示例demo
    vPlayer 模块Demo
    doT的高级用法及loadData的使用
    acmPush模块示例demo
    UIChatBox模块示例demo
    分享一款基于aui框架的图文发布界面
    基于js的APP多语言处理
  • 原文地址:https://www.cnblogs.com/ron123/p/3759994.html
Copyright © 2011-2022 走看看