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 相关文章推荐
alert出数组中的随即值代码
Sep 25 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
微信小程序支付及退款流程详解
Nov 30 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
用ES6写全屏滚动插件的示例代码
May 02 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
js 对象使用的小技巧实例分析
Nov 08 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 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实现的一段简单概率相关代码
2016/05/30 PHP
跨浏览器的设置innerHTML方法
2006/09/18 Javascript
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
Vue响应式原理详解
2017/04/18 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
python中函数传参详解
2016/07/03 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
销售人员自我评价怎么写
2013/09/19 职场文书
家具厂厂长岗位职责
2014/01/01 职场文书
校园广播稿500字
2014/02/04 职场文书
幼儿园六一儿童节活动总结
2015/02/10 职场文书
中学推普周活动总结
2015/05/07 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
乔迁新居祝福语
2019/11/04 职场文书
Nginx的反向代理实例详解
2021/03/31 Servers
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS
Spring中bean集合注入的方法详解
2022/07/07 Java/Android