鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。
(1):click事件：click事件于用户在元素敲击鼠标左键，并在相同元素上松开左键时触发。
        $('p').click(function(){
                alert('click function is running !');
              });

(2):dbclick事件：dbclick事件在用户完成迅速连续的两次点击之后触发，双击的速度取决于操作系统的设置。一般双击事件在页面中不经常使用。
        $('p').dbclick(function(){
                alert('dbclick function is running !');
              });
(3):mousedown事件：mousedown事件在用户敲击鼠标键时触发，跟keydown事件不一样，该事件仅在按下鼠标时触发。
        $('p').mousedown(function(){
                alert('mousedown function is running !');
              });
(4):mouseup事件：mouseup事件在用户松开鼠标时触发，如果在与按下鼠标的元素相同元素上松开，那么click事件也会触发。
        $('p').mouseup(function(){
                alert('mouseup function is running !');
              }).click(function(){
                 alert('click function is running too !');
                 });
(5):mouseover事件：mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发，如果需要知道来自那个元素可以使用，relatedTagrget属性。
(6):mouseout事件：mouseout事件于用户把鼠标移出一个元素时触发，这包括从父元素移动到子元素上，或者使用键盘跳到元素上。
      (5)和(6)这两个事件一般不常用，很难实现与用户的交互，也就是说不易捕获用户事件。
(7):mouseenter事件：mouseenter事件是在用户光标进入元素上时触发。
         $('p').mouseenter(function(){
                alert('mouseenter function is running !');
              });

(8):mouseleaver事件：mouseleaver事件是在用户的光标离开元素时触发。
           $('p').mouseleaver(function(){
                alert('mouseleaver function is running !');
             });
      (7)和(8)这两个事件一般连起来使用，在jQuery中可以使用hover这个函数来代替这两个函数。
       $('p').hover(function(){
                       alert('mouseenter function is running !');
                      },function(){
                              alert('mouseleaver function is running !');
                         });

mousedown:鼠标按下才发生

mouseup:鼠标按下松开时才发生

mouseenter和mouseleave效果和mouseover mouseout效果差不多；但存在区别，区别见代码解析：

css代码：

 <style>

             .cc,.dd{

                 height: 80px;

                 width: 300px;

                 border: 1px solid black;

             }

             .ff,.ee{

                 height: 200px;

                 width: 300px;

                 background-color: darkgrey;

                 border:1px solid red;

                 text-align: center;

             }

         </style>

html代码：

 <body>

         <div class="aa">1、please press down your mouse button</div><br />

         <div class="bb">2、please press up your mouse button</div><br />

         <div class="cc">

             3、mouseenter：颜色变红

             mouseleave：颜色变灰

         </div><br />

         <div class="dd">

             4、mouseover：颜色变黄

             mouseout：颜色变灰

         </div><br />

         <div class="ff"> 5、<p style="">mouseout事件在鼠标离开任意一个子元素及选的元素时触发</p><span></span> </div><br />

         <div class="ee"> 6、<p style="">mouseleave事件只在鼠标离开选取的的元素时触发。</p><span></span>  </div>

     </body>

jqery代码：

 <script>

 //当鼠标按下时会显示

         $(".aa").mousedown(function(){

             $(this).after("<p>when mouse button press down</p>")

         });

 //当鼠标按下松开时发生的

         $(".bb").mouseup(function(){

             $(this).after("<p>when mouse button press up</p>")

         });

 //当鼠标enter/leave

         $(".cc").mouseenter(function(){

             $(".cc").css("background-color","red")

         });

          $(".cc").mouseleave(function(){

             $(".cc").css("background-color","grey")

         });

  //当鼠标mouseover/mouseout

        $(".dd").mouseover(function(){

            $(".dd").css("background-color","yellow")

        });

        $(".dd").mouseout(function(){

            $(".dd").css("background-color","grey")

        });

  //mouseleave 与 mouseout 的区别

  x=;

  y=;

  $(".ff").mouseout(function(){

      $(".ff span").text(x+=);

  })

  $(".ee").mouseleave(function(){

      $(".ee span").text(y+=);

  })

  //mouseenter,mouseover同理

  //mouseover 事件在鼠标移动到选取的元素及其子元素上时触发 。

 //mouseenter 事件只在鼠标移动到选取的元素上时触发。

 </script>

Jquery-鼠标事件的更多相关文章

  1. 深入学习jQuery鼠标事件

    × 目录 [1]类型 [2]写法 [3]合成事件[4]鼠标按键[5]修改键[6]坐标位置 前面的话 鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuer ...

  2. JQuery 鼠标事件简介

    mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发,mouseout事件于用户把鼠标移出一个元素时触发. 下面为你详细介绍下jquery中的鼠标事件: (1):click事件:cl ...

  3. jQuery鼠标事件

    鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的.   (1):click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发.        $('p').click ...

  4. jquery 鼠标事件汇总

    鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键时触发的事件,jQuery中封装了基本上所有的鼠标事件包括点击,双击,移动等鼠标事件,下面我们就来看下这些事件的语法和用法   鼠标事件是在用户移动鼠标 ...

  5. 2017年10月21日 CSS常用样式&鼠标样式 以及 jQuery鼠标事件& jQuery图片轮播& jQuery图片自动轮播代码

    css代码 背景与前景 background-color:#0000; //背景色,样式表优先级高 background-image:url(路径); //设置背景图片 background-atta ...

  6. jQuery鼠标事件汇总

    鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的. 1.click事件:点击鼠标左键时触发 $('p').click(function(){}); 示例: $('p').click(func ...

  7. Jquery 鼠标事件解析

    1 mouseover与mousemove的区别: mouseover是当鼠标移动到对象时产生,只产生一次,这时如果继续在对象上移动,不会再产生mouseover事件,而是mousemove事件,mo ...

  8. jQuery基础（鼠标事件，表单事件，键盘事件，自定义事件 篇）

    1.jQuery鼠标事件之click与dbclick事件   方法一:$ele.click()(不带参数)   <div id="test">点击触发<div&g ...

  9. jQuery-3.事件篇---鼠标事件

    jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是点击操作.jQuery提供了两个方法一个是click方法用于监听用户单击操作,另一个方法是dbclick方法用于 ...

  10. JQuery事件之鼠标事件

    鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的. ():click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发. $('p').click(function( ...

随机推荐

  1. 数塔，杭电oj-2048

    原题地址:http://i.cnblogs.com/EditPosts.aspx?postid=4077291 [Problem Description] 在讲述DP算法的时候,一个经典的例子就是数塔 ...

  2. 5、Java Swing布局管理器(FlowLayout、BorderLayout、CardLayout、BoxLayout、GirdBagLayout 和 GirdLayout)

    5.Java-Swing常用布局管理器       应用布局管理器都属于相对布局,各组件位置可随界面大小而相应改变,不变的只是其相对位置,布局管理器比较难以控制,一般只在界面大小需要改是才用,但即使这 ...

  3. Ubuntu安装Cassandra

    Uninstall Cassandra $ sudo su remove cassandra $ apt-get remove cassandra cleaned the cassandra fold ...

  4. 在服务器上用Fiddler抓取HTTPS流量

    转自:http://yoursunny.com/t/2011/FiddlerHTTPS/在服务器上用Fiddler抓取HTTPS流量 阳光男孩 发表于2011-03-19 开发互联网应用的过程中,常常 ...

  5. 基于Spring Boot的图片上传

    package com.clou.inteface.domain.web.user; import java.io.File; import java.io.IOException; import j ...

  6. 偏最小二乘回归分析建模步骤的R实现(康复俱乐部20名成员测试数据)+补充pls回归系数矩阵的算法实现

    kf=read.csv('d:/kf.csv') # 读取康复数据kfsl=as.matrix(kf[,1:3]) #生成生理指标矩阵xl=as.matrix(kf[,4:6]) #生成训练指标矩阵x ...

  7. 将数据的初始化放到docker中的整个工作过程(问题记录)

    将数据的初始化放到docker中的整个工作过程 由于是打算作为个人博客,所以对于install这个步骤,我从一开始就打算删掉的,前面一个多星期一直在修bug,到前天才开始做这个事情. 过程中也是碰到了 ...

  8. android Activity Application Context 的区别

    用了这么久的Context,对于Context究竟是个什么玩意一直不是很明白.看了网上十几篇文章的介绍 加上自己的理解总结一下.(自己想法,不对勿喷,不想照搬网上一些文字说法来糊弄自己,自己理解的就这 ...

  9. Java IO流之文件流

    一.文件流分类 二.FileInputStream 三.FileOutputStream 四.FileReader 五.FileWriter 六.文件流应用 1,复制或剪切文件 2,读取文件信息 应用 ...

  10. 有关typename

    为了避免潜在的语法解析二义性,你需要在从属于形式类型参数的类型名前面使用typename,这样的类型被称为从属类型(dependent type) (摘自effective STL)