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 相关文章推荐
响应鼠标变换表格背景或者颜色的代码
Mar 30 Javascript
javascript面向对象的方式实现的弹出层效果代码
Jan 28 Javascript
JavaScript基础语法让人疑惑的地方小结
May 23 Javascript
jquery清空textarea等输入框实现代码
Apr 22 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
解析JavaScript的ES6版本中的解构赋值
Jul 28 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
详解Vue 动态添加模板的几种方法
Apr 25 Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
three.js 实现露珠滴落动画效果的示例代码
Mar 01 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
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
2016/07/27 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
Python常用库推荐
2016/12/04 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
Python中的 enum 模块源码详析
2019/01/09 Python
python实现石头剪刀布程序
2021/01/20 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
Python面向对象封装操作案例详解
2019/12/31 Python
Python requests模块session代码实例
2020/04/14 Python
CSS+jQuery+PHP+MySQL实现的在线答题功能
2015/04/25 HTML / CSS
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
社团活动总结书
2014/06/27 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL
JavaScript的function函数详细介绍
2021/11/20 Javascript