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面向对象设计二 构造函数模式
Dec 20 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
JsRender实用入门教程
Oct 31 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
Feb 13 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
React 子组件向父组件传值的方法
Jul 24 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
微信小程序实现弹幕墙(祝福墙)
Nov 18 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
全国FM电台频率大全 - 25 云南省
2020/03/11 无线电
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
js编写选项卡效果
2017/05/23 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
Python实现识别手写数字 Python图片读入与处理
2020/03/23 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
保护环境建议书
2014/03/12 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
2014年度个人总结范文
2015/03/09 职场文书
学校教师培训工作总结
2015/10/14 职场文书
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs