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 相关文章推荐
jquery中dom操作和事件的实例学习-表单验证
Nov 30 Javascript
深入理解JavaScript系列(13) This? Yes,this!
Jan 18 Javascript
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 Javascript
jQuery遍历json的方法(推荐)
Jun 12 Javascript
Vue.js双向绑定实现原理详解
Dec 22 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
Mar 28 Javascript
SeaJS中use函数用法实例分析
Oct 10 Javascript
angularjs实现天气预报功能
Jun 16 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
详解vue的diff算法原理
May 20 Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 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开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
Vue前后端不同端口的实现方法
2018/09/19 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
vue 解决异步数据更新问题
2019/10/29 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
iview实现图片上传功能
2020/06/29 Javascript
js实现表格数据搜索
2020/08/09 Javascript
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
python实现各种插值法(数值分析)
2019/07/30 Python
python如何写个俄罗斯方块
2020/11/06 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
外贸专业求职信
2014/03/09 职场文书
学生个人自我鉴定范文
2014/03/28 职场文书
绘画专业自荐信
2014/07/04 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
会计工作态度自我评价
2015/03/06 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js