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 相关文章推荐
符合W3C网页标准的iframe标签的使用方法
Jul 19 Javascript
js操作二级联动实现代码
Jul 27 Javascript
javascript实现颜色渐变的方法
Oct 30 Javascript
jQuery插件StickUp实现网页导航置顶
Apr 12 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
浅析JavaScript 调试方法和技巧
Oct 22 Javascript
JS验证字符串功能
Feb 22 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 Javascript
vue判断按钮是否可以点击
Apr 09 Vue.js
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
ajax实现无刷新分页(php)
2010/07/18 PHP
PHP数字和字符串ID互转函数(类似优酷ID)
2014/06/30 PHP
从性能方面考虑PHP下载远程文件的3种方法
2015/12/29 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
javascript产生随机数方法汇总
2016/01/25 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
2016/06/17 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
详解如何在Angular中快速定位DOM元素
2017/05/17 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
js+css实现打字效果
2020/06/24 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
python文件读写并使用mysql批量插入示例分享(python操作mysql)
2014/02/17 Python
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
python查看列的唯一值方法
2018/07/17 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
北京SQL新华信咨询
2016/09/30 面试题
linux面试题参考答案(10)
2013/11/04 面试题
留学推荐信怎么写
2014/01/25 职场文书
小学生成长感言
2014/01/30 职场文书
小学生获奖感言范文
2014/02/02 职场文书
购房个人委托书范本
2014/10/11 职场文书
2015年体育部工作总结
2015/04/02 职场文书
婚庆答谢词大全
2015/09/29 职场文书