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 相关文章推荐
Script的加载方法小结
Jan 12 Javascript
jQuery:节点(插入,复制,替换,删除)操作
Mar 04 Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 Javascript
jQuery选择器基础入门教程
May 10 Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 Javascript
vue发送ajax请求详解
Oct 09 Javascript
JavaScript继承与聚合实例详解
Jan 22 Javascript
vue如何使用async、await实现同步请求
Dec 09 Javascript
webpack打包优化的几个方法总结
Feb 10 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 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 数组基础知识小结
2010/08/20 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
能说明你的Javascript技术很烂的五个原因分析
2011/10/28 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
jquery事件preventDefault()方法用法实例
2015/01/16 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
[43:58]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第一场 1月8日
2021/03/11 DOTA
获取Django项目的全部url方法详解
2017/10/26 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
如何在python中写hive脚本
2019/11/08 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
岗位职责的定义
2013/11/10 职场文书
英语故事演讲稿
2014/04/29 职场文书
新学期标语
2014/06/30 职场文书
小学教师年度个人总结
2015/02/05 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python