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 相关文章推荐
js新闻滚动 js如何实现新闻滚动效果
Jan 07 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
仿iframe效果Aajx文件上传实例
Nov 18 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
详解angular2 控制视图的封装模式
Dec 27 Javascript
4 种滚动吸顶实现方式的比较
Apr 09 Javascript
vue项目中mock.js的使用及基本用法
May 22 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 Javascript
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
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
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
xmlHTTP实例
2006/10/24 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
2011/11/21 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
微信小程序实现图片上传
2019/05/23 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
python web框架学习笔记
2016/05/03 Python
Python微信库:itchat的用法详解
2017/08/14 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
python中的for循环
2018/09/28 Python
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
中国网上药店领导者:1药网
2017/02/16 全球购物
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
介绍一下#error预处理
2015/09/25 面试题
竞选班干部的演讲稿
2014/04/24 职场文书
交通安全月活动总结
2015/05/08 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android