鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。
(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. Unite'17 Shanghai再一次问候

    Unite'17 Shanghai再一次问候 --暨Unity2017年度大会 2017年5月11日,主题为"再一次问候"的Unity年度盛会在上海国际会议中心举行,这是Unity ...

  2. /usr/lib/x86_64-linux-gnu/libopencv_highgui.so.2.4.9: undefined reference toTIFFIsTiled@LIBTIFF_4.0'

    今天编译caffe ,本来编译过无数次caffe了,基本坑都能解决的.但这次惹恼我了.一直搞不定. 错误信息是这样的: /usr/lib/x86_64-linux-gnu/libopencv_high ...

  3. yum 安装rabbitMQ

    环境:linux centos6.5 1.安装erlang 下载rpm仓库:wget http://packages.erlang-solutions.com/erlang-solutions-1.0 ...

  4. CoreCLR源码探索(六) NullReferenceException是如何发生的

    NullReferenceException可能是.Net程序员遇到最多的例外了, 这个例外发生的如此频繁, 以至于人们付出了巨大的努力来使用各种特性和约束试图防止它发生, 但时至今日它仍然让很多程序 ...

  5. 2017年最好的6个WEB前端开发手册下载

    php中文网为你推荐6个web前端开发相关手册下载,适合web开发人员和php web开发人员进行下载参考学习! 一. html5中文手册 通过制定如何处理所有 HTML 元素以及如何从错误中恢复的精 ...

  6. CAP原理、一致性模型、BASE理论和ACID特性

    CAP原理 在理论计算机科学中,CAP定理(CAP theorem),又被称作布鲁尔定理(Brewer's theorem),它指出对于一个分布式计算系统来说,不可能同时满足以下三点: 一致性(Con ...

  7. Lesser known dplyr tricks

    In this blog post I share some lesser-known (at least I believe they are) tricks that use mainly fun ...

  8. R语言：利用caret包中的dummyVars函数进行虚拟变量处理

    dummyVars函数:dummyVars creates a full set of dummy variables (i.e. less than full rank parameterizati ...

  9. iOS-创建自己的日志系统

    今天说说怎么创建自己的日志系统 先看下Xcode自己的日志(这里说的NSLog) 系统自带的NSLog打印的信息只有简单的 时间 / 项目名称 / 打印内容 内容比较简单, 很难做分类管理和写入文件 ...

  10. mysql之 MySQL 主从复制概述

    1 .主从复制简介MySQL 主从复制就是将一个 MySQL 实例(Master)中的数据实时复制到另一个 MySQL 实例(slave)中,而且这个复制是一个异步复制的过程.实现整个复制操作主要由三 ...