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 相关文章推荐
jsvascript图像处理—(计算机视觉应用)图像金字塔
Jan 15 Javascript
jQuery基本过滤选择器使用介绍
Apr 18 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
sencha ext js 6 快速入门(必看)
Jun 01 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
使用Node.js给图片加水印的方法
Nov 15 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
js中对象与对象创建方法的各种方法
Feb 27 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
js仿京东放大镜效果
Aug 09 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 Javascript
react中props 的使用及进行限制的方法
Apr 28 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文件下载类
2006/12/06 PHP
php文件上传的简单实例
2013/10/19 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
浅析Laravel5中队列的配置及使用
2016/08/04 PHP
php实现的双色球算法示例
2017/06/20 PHP
基于Laravel 5.2 regex验证的正确写法
2019/09/29 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
jquery键盘事件介绍
2011/01/31 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
实现Python与STM32通信方式
2019/12/18 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL