鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。
(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. Tensorflow实践：CNN实现MNIST手写识别模型

    前言 本文假设大家对CNN.softmax原理已经比较熟悉,着重点在于使用Tensorflow对CNN的简单实践上.所以不会对算法进行详细介绍,主要针对代码中所使用的一些函数定义与用法进行解释,并给出 ...

  2. CI 经常失败？可能是这 5 大原因…

    本文翻译自文章 Top 5 Reasons for CI Failure,主要介绍了 CI 失败的五个原因,包括 CI 服务的错误选择.CI 工程师的不专业性.随意更改CI服务器配置.CI服务器性能差 ...

  3. Fragment回调接口应用间分享数据

    package com.example.mydemo; import java.util.List; import android.app.Activity; import android.app.A ...

  4. 关于蓝桥杯嵌入式STM32的一点收获

    各社团成员培训时自己总结的一点材料,直接粘过来的,可能有些朋友看不明白,总之这个比赛吧:有很多技巧,掌握到技巧能省我们半个月时间,我说的是针对这个比赛,对于STM32还是要多多练习,总之STM32还是 ...

  5. 使用c3p0与DBCP连接池，造成的MySql 8小时问题解决方案

    转自:http://blog.csdn.net/wangfayinn/article/details/24623575 c3p0数据库连接池mysql8小时 目录(?)[-] 基本问题解决 项目环境 ...

  6. 【Java并发系列03】ThreadLocal详解

    img { border: solid 1px } 一.前言 ThreadLocal这个对象就是为多线程而生的,没有了多线程ThreadLocal就没有存在的必要了.可以将任何你想在每个线程独享的对象 ...

  7. 几个常用的linux快捷键和shell知识

    1)   !$    !$是一个特殊的环境变量,它代表了上一个命令的最后一个字符串.如:你可能会这样:     $mkdir mydir     $mv mydir yourdir     $cd y ...

  8. R语言进行文件夹操作示例（转）

    rm(list=ls())path = 'J:/lab/EX29 --在R语言中进行文件(夹)操作'setwd(path)cat("file A\n", file="A& ...

  9. String为值类型还是引用类型

    关于String为值类型还是引用类型的讨论一直没有平息,最近一直在研究性能方面的问题,今天再次将此问题进行一次明确.希望能给大家带来点帮助. 如果有错误请指出. 来看下面例子: //值类型 int a ...

  10. js文件下载及命名（兼容多浏览器）

    函数功能:实现主流浏览器的文件下载功能: 兼容性: >=IE10,Edge,chrome,firefox; 与后台的请求方式:GET请求,  url携带参数  url?id=123(隐藏文件真实 ...