鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。
(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. 初识Java反射

    要详细的了解Java反射,就得要了解Java的类加载以及何为运行时动态加载等等概念.本文抛开其余概念,简单介绍Java反射,详细介绍会在以后有一个系统而全面的认识过后展开. 反射是Java被视为动态语 ...

  2. Lists, Maps and Sets in Java

    ArrayList vs LinkedList vs Vector From the hierarchy diagram, they all implement List interface. The ...

  3. iOS storyBoard中tableViewCell传值方法

    一般在storyboard中传值通过identifier的值来控制segue的跳转和传值,但是,如果在tableView中,由于cell特别多,不可能创建n个identifier标识符,这里通过NSI ...

  4. ionic 使用mobisscrolls，实现日期选择的插件

    废话不多说,直接说用法: 1,先下载mobisscrolls的破解版,下载地址,链接:http://pan.baidu.com/s/1boSKf51 密码:5dft 当然你也可以去官网下载,不过官网的 ...

  5. git底层原理（一）

    1.git仓库的初始化: 输入git init指令,会看到在当前空目录下创建了一个.git隐藏文件夹,这个就是git实现一切版本管理的关键.进入到.git目录下,里面包含三个文件(config/des ...

  6. 支付宝支付-常用支付API详解(查询、退款、提现等)

    所有的接口支持沙盒环境的测试 1.前言 前面几篇文件详细介绍了 支付宝提现.扫码支付.条码支付.Wap支付.App支付 支付宝支付-提现到个人支付宝 支付宝支付-扫码支付 支付宝支付-刷卡支付(条码支 ...

  7. Windows、Office系列产品精华部分集锦

    提示 有了这个帖子麻麻再也不用担心我因为四处找Microsoft家的软件和系统而四处劳累所烦恼了! 首先,你们最爱的老XP同志,XP同志虽然退休了,但是依然坚持在岗位上,向他致敬!! Windows ...

  8. Coursera 机器学习笔记（六）

    主要为第八周内容:聚类(Clustering).降维 聚类是非监督学习中的重要的一类算法.相比之前监督学习中的有标签数据,非监督学习中的是无标签数据.非监督学习的任务是对这些无标签数据根据特征找到内在 ...

  9. 【数据库】Mean web开发 02-Windows下Mongodb安装配置及常用客户端管理工具

    简介 Mean是JavaScript的全栈开发框架.更多介绍 用MongoDB实现持久数据的存储是Mean Web全栈开发中的一部分. MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非 ...

  10. echarts仪表盘如何设置图例(legend)

    echarts 图表中经常需要对不同的颜色设置图例标识不同的意义,而仪表盘的指针只存在一个值,如何表示不同颜色的意义,官网配置项并未给出该功能: 不同段的颜色是通过axisLine->lineS ...