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 相关文章推荐
网页加载时页面显示进度条加载完成之后显示网页内容
Dec 23 Javascript
简单的JavaScript互斥锁分享
Feb 02 Javascript
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
javascript实现浏览器窗口传递参数的方法
Sep 03 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
基于jquery步骤进度条源码分享
Nov 12 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
javascript iframe跨域详解
Oct 26 Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 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调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
php cli 小技巧
2013/06/03 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
Thinkphp5结合layer弹窗定制操作结果页面
2017/07/07 PHP
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
JS实现可拖曳、可关闭的弹窗效果
2015/09/26 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
numpy添加新的维度:newaxis的方法
2018/08/02 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
python高级特性简介
2020/08/13 Python
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
西安众合通用.net笔试题
2013/03/18 面试题
精彩的推荐信范文
2013/11/26 职场文书
实习生自荐信范文分享
2013/11/27 职场文书
化学教育专业求职信
2014/07/08 职场文书
新闻专业毕业生求职信
2014/08/08 职场文书
青年志愿者活动方案
2014/08/17 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
农村党建工作汇报材料
2014/10/27 职场文书
公司门卫岗位职责
2015/04/13 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
今日说法观后感
2015/06/08 职场文书
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android