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 相关文章推荐
JavaScript 字符串连接性能优化
Dec 20 Javascript
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
20款超赞的jQuery插件 Web开发人员必备
Feb 26 Javascript
动感效果的TAB选项卡jquery 插件
Jul 09 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
Sep 19 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
vue-router传参用法详解
Jan 19 Javascript
一次微信小程序内地图的使用实战记录
Sep 09 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调用Oracle存储过程
2006/10/09 PHP
PHP 读取Postgresql中的数组
2013/04/14 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
vue如何进行动画的封装
2018/09/26 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
Python循环语句中else的用法总结
2016/09/11 Python
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
对Python字符串中的换行符和制表符介绍
2018/05/03 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
预备党员表决心书
2014/03/11 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
政风行风建设责任书
2014/07/23 职场文书
大学生安全责任书
2014/07/25 职场文书
公务员检讨书
2014/11/01 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
物业保洁员管理制度
2015/08/05 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
导游词之无锡唐城
2019/12/12 职场文书
python使用torch随机初始化参数
2022/03/22 Python
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js