jQuery鼠标事件总结


Posted in Javascript onOctober 13, 2016

鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。下面就来系统的介绍一下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').mouseleave(function(){
 alert('mouseleave function is running !');
}
);

(7)和(8)这两个事件一般连起来使用,在jQuery中可以使用hover这个函数来代替这两个函数。

$('p').hover(function(){
 alert('mouseenter function is running !');
 },function(){
 alert('mouseleaver function is running !');
 }
 );

希望本文所述对大家学习jquery有所帮助。 

Javascript 相关文章推荐
PNG背景在不同浏览器下的应用
Jun 22 Javascript
js 通用javascript函数库整理
Aug 14 Javascript
javascript中注册和移除事件的4种方式
Mar 20 Javascript
JS继承--原型链继承和类式继承
Apr 08 Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
js实现九宫格拼图小游戏
Feb 13 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
react-redux中connect()方法详细解析
May 27 Javascript
react同构实践之实现自己的同构模板
Mar 13 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 #Javascript
jQuery中delegate()方法的用法详解
Oct 13 #Javascript
炫酷的js手风琴效果
Oct 13 #Javascript
轻松搞定js表单验证
Oct 13 #Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 #Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 #Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 #Javascript
You might like
PHP反转字符串函数strrev()函数的用法
2012/02/04 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
2012/02/03 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
js鼠标滑过图片震动特效的方法
2015/02/17 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
jQuery.parseJSON()函数详解
2019/02/28 jQuery
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
python 中文字符串的处理实现代码
2009/10/25 Python
Python中获取网页状态码的两个方法
2014/11/03 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
python 绘制正态曲线的示例
2020/09/24 Python
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
视图的作用
2014/12/19 面试题
拖鞋店创业计划书
2014/01/15 职场文书
生物学学生自我评价
2014/01/17 职场文书
春节联欢晚会主持词范文
2014/03/24 职场文书
大学生学习计划书
2014/09/15 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
企业法人任命书
2015/09/21 职场文书
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL