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


Posted in Javascript onDecember 21, 2011

因为最近技术长进缓慢,也没高手带,只能靠自己了,所以想仿个WEBQQ来锻炼下自己。做之前最好先把必要的东西准备好。jquery其实本身的事件机制就很完善了,包括了单击,双击,鼠标移入,鼠标移出等。但是却少了一个做事件。就是鼠标右击事件。当然大家也是直接用侦听鼠标按下事件,然后通过if来判断执行相应的函数。造成鼠标右击事件的效果。

但是这不是我想要的,我想要的似乎这个事件可以跟其它事件比如单击事件一样。可以被方便的使用,而不需要每次都去判断。这里通过编写jquery插件的形式扩展,让这个方法可以直接使用$().rightClick();来使用。

jQuery的插件主要分3种类型

1.封装对象方法的插件

(这种插件是将对象封装起来,用于对通过选择器获取的对象进行操作,也就是这里需要用到的方法)

2.封装全局函数的插件

(可以将独立的函数加入到jquery的命名空间下)

3.选择器插件

(虽然jquery的选择器已经很强大了,但还是会需要扩展一些自己喜欢的选择器)

其它的一些关于插件的知识大家可以自己去查阅相关资料。这里就直接开始讲了。

这里是使用的第一种插件类型,先分析下具体的编写思路。

1.使用鼠标右键事件后,将禁止所有的系统右键菜单功能

2.绑定鼠标右键事件后,实际是触发鼠标按下事件。

3.通过if来判断,如果按下的是右键则执行参数,这个参数只能是函数。如果不是右键则不执行。

相信讲到这里,对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);

$(document).ready(function(e){ 
$("body").rightClick(function()(alert("右键单击"))); 
});

jquery事件机制扩展,jquery鼠标右键事件。
使用方法跟其它事件一样
Javascript 相关文章推荐
Javascript 类与静态类的实现
Apr 01 Javascript
js时间日期和毫秒的相互转换
Feb 22 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
Jul 09 Javascript
通过Javascript读取本地Excel文件内容的代码示例
Apr 08 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
详解JS正则replace的使用方法
Mar 06 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
Nov 19 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 07 Javascript
DIV外区域Click后关闭DIV的实现代码
Dec 21 #Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 #Javascript
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 #Javascript
这段js代码得节约你多少时间
Dec 20 #Javascript
js实现的仿新浪微博完美的时间组件升级版
Dec 20 #Javascript
非主流的textarea自增长实现js代码
Dec 20 #Javascript
javascript之querySelector和querySelectorAll使用介绍
Dec 20 #Javascript
You might like
通过具体程序来理解PHP里面的抽象类
2010/01/28 PHP
PHP两种快速排序算法实例
2015/02/15 PHP
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
推荐4个原生javascript常用的函数
2015/01/12 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
canvas绘制七巧板
2017/02/03 Javascript
原生js开发的日历插件
2017/02/04 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
2019/11/12 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
使用Python读写文本文件及编写简单的文本编辑器
2016/03/11 Python
python读写json文件的简单实现
2017/04/11 Python
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
H&M旗下高端女装品牌:& Other Stories
2018/05/07 全球购物
技术学校毕业生求职信分享
2013/12/02 职场文书
电厂厂长岗位职责
2014/01/02 职场文书
药品促销活动方案
2014/02/14 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android