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 相关文章推荐
JS中setTimeout()的用法详解
Apr 14 Javascript
JS判断文本框内容改变事件的简单实例
Mar 07 Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 Javascript
jQuery学习笔记之jQuery中的$
Jan 19 Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 Javascript
jQuery添加options点击事件并传值实例代码
May 18 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
Javascript中绑定click事件的四种方式介绍
Oct 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实现图片压缩的两则实例
2014/07/19 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
JavaScript 变量作用域分析
2011/07/04 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
BootStrap Fileinput初始化时的一些参数
2016/12/30 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
简单了解python调用其他脚本方法实例
2020/03/26 Python
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
python 实现图片批量压缩的示例
2020/12/18 Python
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
就业推荐表自我鉴定
2013/10/29 职场文书
大学生创业计划书的用途
2014/01/08 职场文书
干部行政关系介绍信
2014/01/17 职场文书
新学期开学演讲稿
2014/05/24 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书