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 相关文章推荐
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
javascript web页面刷新的方法收集
Jul 02 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
用innerhtml提高页面打开速度的方法
Aug 02 Javascript
12种不宜使用的Javascript语法整理
Nov 04 Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
学习JavaScript设计模式之享元模式
Jan 18 Javascript
AngularJS Ajax详解及示例代码
Aug 17 Javascript
ECMAScript6 新特性范例大全
Mar 24 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 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过滤敏感词的示例
2014/03/31 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
匹配任意字符的正则表达式写法
2010/04/29 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
解决React Native端口号修改的方法
2017/07/28 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
Python中多线程的创建及基本调用方法
2016/07/08 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
门市房租房协议书
2014/12/04 职场文书
刘公岛导游词
2015/02/05 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL