`

jQuery事件之鼠标事件

 
阅读更多

鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。
   (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 !');
                         });

 

 

来自: http://hi.baidu.com/yejiejay/blog/item/19374ffb69a064076d22eba3.html

分享到:
评论

相关推荐

    jquery监听鼠标滚轮事件+js监听滚轮事件

    本篇将详细介绍如何使用jQuery和原生JavaScript实现鼠标滚轮事件的监听。 一、jQuery监听鼠标滚轮事件 jQuery库提供了一种简洁的方式来处理DOM元素上的事件,包括滚轮事件。要监听滚轮事件,可以使用`$(element)....

    jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示

    jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示

    jquery鼠标事件的小例子

    这个"jquery鼠标事件的小例子"旨在帮助初学者更好地理解如何在jQuery中使用鼠标事件,同时结合CSS来实现交互效果。 首先,让我们深入了解一下jQuery中的鼠标事件。jQuery封装了许多原生JavaScript中的鼠标事件,...

    jquery鼠标滚轮事件

    "jQuery鼠标滚轮事件"是一个非常实用的功能,它允许我们监听并响应用户使用鼠标滚轮时的操作,以此来实现诸如页面滚动、图片缩放等丰富的交互效果。在本文中,我们将深入探讨jQuery中关于鼠标滚轮事件的知识点。 ...

    jquery鼠标滚轮事件支持插件

    在给定的“jquery鼠标滚轮事件支持插件”中,我们关注的是如何利用jQuery扩展来处理鼠标的滚轮事件。这个插件允许开发者监听和响应用户滚动鼠标的滚轮,从而在网页上实现更加动态和交互的功能。 标题中的“jquery...

    jquery 体育馆场馆鼠标拖动事件

    一、jQuery鼠标拖动事件 在jQuery中,没有直接提供一个名为“拖动”(drag)的事件,但我们可以结合`mousedown`、`mousemove`和`mouseup`事件来模拟实现拖动行为。这三个事件分别对应于鼠标的按下、移动和释放,...

    基于jquery实现的鼠标左中右键单双击及拖拽和滚轮事件插件原型

    本篇文章将深入探讨如何基于jQuery实现一个功能丰富的鼠标事件插件,包括左键、中键、右键的单击、双击、拖拽事件,以及滚轮事件。 首先,我们来看标题提及的"基于jquery实现的鼠标左中右键单双击及拖拽和滚轮事件...

    jquery实现鼠标移动出现提示信息

    标签“jQuery 实现鼠标移动 提示信息”表明这项功能涉及到的技术点,包括 jQuery 库、鼠标移动事件和提示信息的显示。 部分内容解析 部分内容中提到了作者的个人经历,例如孩子的生日和个人项目的需求。然后,作者...

    jQuery各种鼠标事件

    介绍了jQuery的各种鼠标事件,方便jquery不是很好的童鞋参考

    jquery捕获鼠标事件提示.zip

    本教程将深入探讨如何使用jQuery来捕获鼠标事件并创建提示效果。 首先,`index.html`是网页的结构文件,通常包含了HTML元素,如`<head>`用于设置页面元数据,`<body>`用于展示内容,以及引用外部资源如CSS样式表和...

    鼠标双击或触摸双击事件检测jQuery插件

    本文将深入探讨一个针对鼠标双击和触摸屏双击事件检测的jQuery插件——jQuery-doubleTap。 **一、插件简介** jQuery-doubleTap是一款专门用于检测鼠标双击和移动设备触摸屏双击事件的插件。它通过优化"click"和...

    jquery图片跟随鼠标晃动效果

    在"jquery图片跟随鼠标晃动效果"中,开发者可能利用了jQuery的`mousemove`事件来监听鼠标的移动。当用户移动鼠标时,这个事件会被触发,然后根据鼠标的位置改变图片的位置,实现图片跟随鼠标的效果。此外,可能还...

    jquery元素跟随鼠标移动.rar

    本示例"jquery元素跟随鼠标移动"是JS特效的一种,它涉及到的核心技术主要是jQuery的选择器、事件处理和CSS定位。接下来,我们将深入探讨这些知识点。 首先,jQuery选择器是jQuery库中的基石,它使得我们能够方便地...

    jquery hover 冒泡事件制作心型图片墙鼠标悬浮图片

    在本文中,我们将深入探讨如何使用jQuery的hover事件来创建一个独特的心形图片墙,当鼠标悬浮在图片上时,会产生动态效果。首先,我们需要理解jQuery库的基本概念以及hover事件的工作原理。 jQuery是一个广泛使用的...

    jQuery鼠标悬停图片震动特效.zip

    《jQuery鼠标悬停图片震动特效》 在网页设计中,动态效果往往能吸引用户的注意力,提升用户体验。"jQuery鼠标悬停图片震动特效"就是这样一种巧妙的技术应用,它结合了CSS3的圆角样式和jQuery库,实现了当鼠标悬停在...

    jQuery背景图片跟随鼠标摆动动画特效

    这个特效的核心在于通过jQuery监听鼠标的移动事件,然后改变背景图片的位置或角度,使得背景图像仿佛被鼠标吸引,随着鼠标指针的移动而摆动。这种效果在响应式设计中尤为适用,因为它可以适应不同设备的屏幕尺寸,...

    扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件完整版Demo下载

    jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!

    jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏-20130715

    本篇文章将详细讲解如何利用jQuery实现一个特定的效果:当鼠标滑过图片时,图片上的半透明标题文字会滑动显示或隐藏。这个效果常见于网页设计中,可以增加用户的交互体验。 首先,我们需要理解jQuery中的`hover`...

    jquery动态按钮鼠标悬停图标跳动

    本项目"jquery动态按钮鼠标悬停图标跳动"旨在实现一个交互式的用户界面,当鼠标悬停在按钮上时,图标会呈现动态跳动的效果,提升用户体验。 首先,我们需要理解项目的组成部分: 1. **xw素材.htm**:这可能是一个...

Global site tag (gtag.js) - Google Analytics