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 字符串连接的性能问题(多浏览器)
Nov 18 Javascript
关于Jquery操作Cookie取值错误的解决方法
Aug 26 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
详解vue项目构建与实战
Jun 27 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 Javascript
Layui选项卡制作历史浏览记录的方法
Sep 28 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 Javascript
vue 扩展现有组件的操作
Aug 14 Javascript
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
JavaScript实现两个数组的交集
Mar 25 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缩略图生成程式(需要GD库支持)
2007/03/06 PHP
什么是MVC,好东西啊
2007/05/03 PHP
PHP 处理图片的类实现代码
2009/10/23 PHP
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
简单的js分页脚本
2009/05/21 Javascript
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
vue编写简单的购物车功能
2021/01/08 Vue.js
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
Python实现多线程抓取妹子图
2015/08/08 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
python实现AES加密解密
2019/03/28 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
工程总经理工作职责
2013/12/09 职场文书
采购员的工作职责
2013/12/26 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
2014年班级工作总结
2014/11/14 职场文书
Python集合的基础操作
2021/11/01 Python
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL