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 相关文章推荐
类似GMAIL的Ajax信息反馈显示
Feb 16 Javascript
关于图片按比例自适应缩放的js代码
Oct 30 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
Bootstrap响应式侧边栏改进版
Sep 17 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 Javascript
vue底部加载更多的实例代码
Jun 29 Javascript
小程序server请求微信服务器超时的解决方法
May 21 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 Javascript
如何利用JavaScript实现二叉搜索树
Apr 02 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
在IIS上安装PHP4.0正式版
2006/10/09 PHP
php中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
说明的比较细的php 正则学习实例
2008/07/30 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
Prototype Function对象 学习
2009/07/12 Javascript
javascript操作数组详解
2014/12/17 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
微信小程序前端自定义分享的实现方法
2019/06/13 Javascript
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
Python实现简单文本字符串处理的方法
2018/01/22 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
班级团队活动方案
2014/08/14 职场文书
学习十八大的心得体会
2014/09/01 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
财务会计实训报告
2014/11/05 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
教学副校长工作总结
2015/08/13 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书