jquery事件机制扩展插件 jquery鼠标右键事件。


Posted in Javascript onDecember 26, 2011

jquery其实本身的事件机制就很完善了,包括了单击,双击,鼠标移入,鼠标移出等。但是却少了一个做事件。就是鼠标右击事件。当然大家也是直接用侦听鼠标按下事件,然后通过if来判断执行相应的函数。造成鼠标右击事件的效果。
但是这不是我想要的,我想要的似乎这个事件可以跟其它事件比如单击事件一样。可以被方便的使用,而不需要每次都去判断。这里通过编写jquery插件的形式扩展,让这个方法可以直接使用$().rightClick();来使用。
jQuery的插件主要分3种类型
1.封装对象方法的插件
(这种插件是将对象封装起来,用于对通过选择器获取的对象进行操作,也就是这里需要用到的方法)
2.封装全局函数的插件
(可以将独立的函数加入到jquery的命名空间下)
3.选择器插件
(虽然jquery的选择器已经很强大了,但还是会需要扩展一些自己喜欢的选择器)
其它的一些关于插件的知识大家可以自己去查阅相关资料。这里就直接开始讲了。
这里是使用的第一种插件类型,先分析下具体的编写思路。
1.使用鼠标右键事件后,将禁止所有的系统右键菜单功能
2.绑定鼠标右键事件后,实际是触发鼠标按下事件。
3.通过if来判断,如果按下的是右键则执行参数,这个参数只能是函数。如果不是右键则不执行。
相信讲到这里,对jquery很熟悉的也明白要怎么做了。
jquery事件机制扩展插件 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);

Javascript 相关文章推荐
javascript 主动派发事件总结
Aug 09 Javascript
js校验表单后提交表单的三种方法总结
Feb 28 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
微信小程序实现的动态设置导航栏标题功能示例
Jan 31 Javascript
详解js中的原型,原型对象,原型链
Jul 16 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 Javascript
写一个Vue loading 插件
Nov 09 Javascript
查看源码的工具 学习jQuery源码不错的工具
Dec 26 #Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 #Javascript
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 #Javascript
JS代码优化技巧之通俗版(减少js体积)
Dec 23 #Javascript
关于跨站脚本攻击问题
Dec 22 #Javascript
js DOM的学习笔记
Dec 22 #Javascript
jquery 年会抽奖程序
Dec 22 #Javascript
You might like
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
js中window.open打开一个新的页面
2014/08/10 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
nodejs微信开发之接入指南
2019/03/17 NodeJs
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
python抓取豆瓣图片并自动保存示例学习
2014/01/10 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
Django密码系统实现过程详解
2019/07/19 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
团员的自我评价
2013/12/01 职场文书
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
八一慰问活动方案
2014/02/07 职场文书
信息技术课后反思
2014/04/27 职场文书
教师爱岗敬业演讲稿
2014/05/05 职场文书
公司员工活动策划方案
2014/08/20 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
先进班组事迹材料
2014/12/25 职场文书
商务代表岗位职责
2015/02/15 职场文书