jquery事件机制扩展插件 jquery鼠标右键事件。


Posted in Javascript onDecember 26, 2011

jquery其实本身的事件机制就很完善了,包括了单击,双击,鼠标移入,鼠标移出等。但是却少了一个做事件。就是鼠标右击事件。当然大家也是直接用侦听鼠标按下事件,然后通过if来判断执行相应的函数。造成鼠标右击事件的效果。
但是这不是我想要的,我想要的似乎这个事件可以跟其它事件比如单击事件一样。可以被方便的使用,而不需要每次都去判断。这里通过编写jquery插件的形式扩展,让这个方法可以直接使用$().rightClick();来使用。
jQuery的插件主要分3种类型
1.封装对象方法的插件
(这种插件是将对象封装起来,用于对通过选择器获取的对象进行操作,也就是这里需要用到的方法)
2.封装全局函数的插件
(可以将独立的函数加入到jquery的命名空间下)
3.选择器插件
(虽然jquery的选择器已经很强大了,但还是会需要扩展一些自己喜欢的选择器)
其它的一些关于插件的知识大家可以自己去查阅相关资料。这里就直接开始讲了。
这里是使用的第一种插件类型,先分析下具体的编写思路。
1.使用鼠标右键事件后,将禁止所有的系统右键菜单功能
2.绑定鼠标右键事件后,实际是触发鼠标按下事件。
3.通过if来判断,如果按下的是右键则执行参数,这个参数只能是函数。如果不是右键则不执行。
相信讲到这里,对jquery很熟悉的也明白要怎么做了。
jquery事件机制扩展插件 jquery鼠标右键事件。

jquery事件机制扩展,jquery鼠标右键事件。

/*鼠标右键插件*/ 
(function($) { 
$.fn.extend({ 
//定义鼠标右键方法,接收一个函数参数 
"rightClick":function(fn){ 
//调用这个方法后将禁止系统的右键菜单 
$(document).bind('contextmenu',function(e){ 
return false; 
}); 
//为这个对象绑定鼠标按下事件 
$(this).mousedown(function(e){ 
//如果按下的是右键,则执行函数 
if(3 == e.which){ 
fn(); 
} 
}); 
} 
}); 
})(jQuery);

Javascript 相关文章推荐
jQuery判断元素是否是隐藏的代码
Apr 24 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 Javascript
bootstrapValidator表单验证插件学习
Dec 30 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
JavaScript实现的反序列化json字符串操作示例
Jul 18 Javascript
Angular项目如何升级至Angular6步骤全纪录
Sep 03 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 Javascript
laravel-admin 与 vue 结合使用实例代码详解
Jun 04 Javascript
查看源码的工具 学习jQuery源码不错的工具
Dec 26 #Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 #Javascript
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 #Javascript
JS代码优化技巧之通俗版(减少js体积)
Dec 23 #Javascript
关于跨站脚本攻击问题
Dec 22 #Javascript
js DOM的学习笔记
Dec 22 #Javascript
jquery 年会抽奖程序
Dec 22 #Javascript
You might like
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
让的PHP代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
PHP基本语法总结
2014/09/06 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
pygame学习笔记(4):声音控制
2015/04/15 Python
详解Python pygame安装过程笔记
2017/06/05 Python
用Django写天气预报查询网站
2018/10/21 Python
Python matplotlib的使用并自定义colormap的方法
2018/12/13 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
匡威荷兰官方网站:Converse荷兰
2018/10/24 全球购物
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
设计师大码女装:11 Honoré
2020/05/03 全球购物
《去年的树》教学反思
2014/04/11 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
代领报检证委托书范本
2014/10/11 职场文书
为什么RedisCluster设计成16384个槽
2021/09/25 Redis