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 相关文章推荐
原型方法的不同写法居然会影响调试的解决方法
Mar 08 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
JQuery each()函数如何优化循环DOM结构的性能
Dec 10 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
Sep 09 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
node.js基于express使用websocket的方法
Nov 09 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
vue实现循环切换动画
Oct 17 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
基于Express框架使用POST传递Form数据
Aug 10 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
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
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
php基础知识:函数基础知识
2006/12/13 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
PHP实现的简单组词算法示例
2018/04/10 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
js 事件小结 表格区别
2007/08/13 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
JS图片无缝、平滑滚动代码
2014/03/11 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
Vue修改项目启动端口号方法
2019/11/07 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
python正则表达式抓取成语网站
2013/11/20 Python
Python实现自动发送邮件功能
2021/03/02 Python
Python使用python-docx读写word文档
2019/08/26 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
大学生自我评价怎样写好
2013/10/23 职场文书
商务英语求职自荐信范文
2013/12/24 职场文书
捐书寄语赠言
2014/01/18 职场文书
人力资源部经理助理岗位职责
2014/03/04 职场文书
家长对孩子的评语
2014/04/18 职场文书
市级文明单位申报材料
2014/05/07 职场文书
演讲比赛策划方案
2014/06/11 职场文书
上党课的心得体会
2014/09/02 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
2014年工程部工作总结
2014/11/25 职场文书
pytorch 6 batch_train 批训练操作
2021/05/28 Python
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server
app场景下uniapp的扫码记录
2022/07/23 Java/Android