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 相关文章推荐
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
JavaScript中的数学运算介绍
Dec 29 Javascript
jquery图片滚动放大代码分享(1)
Aug 25 Javascript
JS简单获取及显示当前时间的方法
Aug 03 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
Oct 04 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 Javascript
微信小程序多张图片上传功能
Jun 07 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
d3.js实现图形拖拽
Dec 19 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的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
php数组合并的二种方法
2014/03/21 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
关于php几种字符串连接的效率比较(详解)
2017/02/22 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
用js得到网页中所有的div的id
2020/10/19 Javascript
jquery $.ajax入门应用一
2008/11/19 Javascript
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
JavaScript 学习笔记(九)call和apply方法
2010/01/11 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
js使用for循环及if语句判断多个一样的name
2014/09/09 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
webpack多入口多出口的实现方法
2018/08/17 Javascript
Python列表切片用法示例
2017/04/19 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
python实现excel读写数据
2021/03/02 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
详解python中的time和datetime的常用方法
2019/07/08 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
python解包概念及实例
2021/02/17 Python
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
党的群众路线对照检查材料
2014/08/27 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
个人欠条范本
2015/07/03 职场文书
敬老院活动感想
2015/08/07 职场文书
进行数据处理的6个 Python 代码块分享
2022/04/06 Python