`
paulfzm
  • 浏览: 884332 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多

因为最近技术长进缓慢,也没高手带,只能靠自己了,所以想仿个WEBQQ来锻炼下自己。做之前最好先把必要的东西准备好。jquery其实本身的事件机制就很完善了,包括了单击,双击,鼠标移入,鼠标移出等。但是却少了一个做事件。就是鼠标右击事件。当然大家也是直接用侦听鼠标按下事件,然后通过if来判断执行相应的函数。造成鼠标右击事件的效果。

但是这不是我想要的,我想要的似乎这个事件可以跟其它事件比如单击事件一样。可以被方便的使用,而不需要每次都去判断。这里通过编写jquery插件的形式扩展,让这个方法可以直接使用$().rightClick();来使用。

jQuery的插件主要分3种类型

1.封装对象方法的插件

(这种插件是将对象封装起来,用于对通过选择器获取的对象进行操作,也就是这里需要用到的方法)

2.封装全局函数的插件

(可以将独立的函数加入到jquery的命名空间下)

3.选择器插件

(虽然jquery的选择器已经很强大了,但还是会需要扩展一些自己喜欢的选择器)

其它的一些关于插件的知识大家可以自己去查阅相关资料。这里就直接开始讲了。

这里是使用的第一种插件类型,先分析下具体的编写思路。

1.使用鼠标右键事件后,将禁止所有的系统右键菜单功能

2.绑定鼠标右键事件后,实际是触发鼠标按下事件。

3.通过if来判断,如果按下的是右键则执行参数,这个参数只能是函数。如果不是右键则不执行。

相信讲到这里,对jquery很熟悉的也明白要怎么做了。

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

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

 

复制代码
 1 /*鼠标右键插件*/
 2 (function($) {
 3     $.fn.extend({
 4         //定义鼠标右键方法,接收一个函数参数
 5         "rightClick":function(fn){
 6             //调用这个方法后将禁止系统的右键菜单
 7             $(document).bind('contextmenu',function(e){
 8                 return false;
 9             });
10             //为这个对象绑定鼠标按下事件
11             $(this).mousedown(function(e){
12                 //如果按下的是右键,则执行函数
13                 if(3 == e.which){
14                      fn();
15                   }
16             });
17         }
18     });
19  
20 })(jQuery);
复制代码

 

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

使用方法跟其它事件一样

原创非首发,首发自21cpu

原文地址

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

分享到:
评论

相关推荐

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

    事件处理是jQuery的核心部分之一,而本文中提到的“jquery事件机制扩展插件jquery鼠标右键事件”,则是在原有的jQuery事件机制上进行了扩展,添加了对鼠标右键事件的处理能力。 事件机制在前端交互中占据着非常重要...

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

    jquery其实本身的事件机制就很完善了,包括了单击,双击,鼠标移入,鼠标移出等。但是却少了一个做事件。就是鼠标右击事件。当然大家也是直接用侦听鼠标按下事件,然后通过if来判断执行相应的函数。造成鼠标右击事件...

    基于jquery的鼠标右键菜单插件

    本主题聚焦于一个基于jQuery实现的鼠标右键菜单插件,该插件为开发者提供了一种灵活且易于定制的方式来添加自定义的右键上下文菜单到网页元素上。以下是对这个插件的详细解析。 ### 一、jQuery简介 jQuery是由John ...

    基于jquery实现的鼠标左中右键单双击及拖拽和滚轮事件插件原型

    本篇文章将深入探讨如何基于jQuery实现一个功能丰富的鼠标事件插件,包括左键、中键、右键的单击、双击、拖拽事件,以及滚轮事件。 首先,我们来看标题提及的"基于jquery实现的鼠标左中右键单双击及拖拽和滚轮事件...

    jquery右键菜单插件

    jQuery右键菜单插件通常是一个JavaScript库,它扩展了jQuery的功能,允许我们在鼠标右键点击时显示自定义的上下文菜单。这些菜单可以包含一系列可点击的选项,每个选项都关联着一个特定的操作。通过这个插件,我们...

    Jquery-右键菜单插件

    "Jquery-右键菜单插件"正是基于jQuery构建的,用于实现鼠标右键点击时显示自定义菜单。这个插件包含了所有必要的文件,如JavaScript源代码、CSS样式表以及可能的示例HTML文件。这些文件通常包含在压缩包中的"jQuery-...

    jquery 右键自定义上下文菜单插件

    上下文菜单(Context Menu)通常是指当用户在鼠标右键点击时弹出的菜单,它显示与当前所选对象相关的操作选项。在网页中,这种菜单可以提供特定功能,比如复制、粘贴、查看源代码等,或者根据网页内容进行特定操作,...

    jQuery鼠标右键点击菜单代码.zip

    jQuery鼠标右键点击菜单代码是基于JavaScript库jQuery的一款实用插件,主要应用于网页中的上下文菜单(context menu)功能。这种菜单通常会在用户在页面上右键点击时弹出,提供一系列可选的操作,比如“复制”、...

    jquery javascript八款web程序插件,鼠标右键事件,鼠标滚轮事件,自定义弹窗风格.docx

    【jQuery 插件机制及其重要性】 jQuery 是一个流行的 JavaScript 库,因其简洁的语法和强大的功能而受到广泛赞誉。自发表关于 jQuery 的系列文章以来,jQuery 的地位得到了微软等大公司的认可,被纳入 Visual ...

    jquery 右键菜单功能

    jQuery右键菜单功能主要是通过监听鼠标右键点击事件(`contextmenu`)来触发自定义的菜单展示。当用户在网页上右键点击时,JavaScript会阻止浏览器默认的右键菜单弹出,然后动态创建或显示预先定义好的HTML结构,...

    jQuery右键点击下拉菜单插件.zip

    该插件的核心在于jQuery的选择器和事件处理机制。jQuery是一个轻量级的JavaScript库,简化了DOM操作、事件处理、动画以及Ajax交互。通过jQuery,我们可以选择页面上的特定元素,然后绑定右键点击事件,当用户在该...

    jQuery右键自定义菜单.zip

    接着,我们需要编写JavaScript代码来监听鼠标右键点击事件,并在触发该事件时显示或隐藏菜单。jQuery的`.on()`方法可以方便地绑定事件监听器,`.show()`和`.hide()`方法则用来控制菜单的显示与隐藏。 在实现菜单项...

    简单的鼠标右键

    这个简单的鼠标右键项目对初学者来说是个很好的学习资源,因为它涉及到JavaScript的基本使用、事件处理、以及第三方库和插件的集成,这些都是Web开发中的重要技能。同时,对于有经验的开发者,它可能是一个快速实现...

    基于Bootstrap的jQuery右键上下文菜单插件

    在网页开发中,交互性和...此外,这个插件可以通过进一步封装和扩展,例如添加自定义事件、动态生成菜单等,来满足更复杂的项目需求。在实际开发中,你还可以考虑优化性能,比如使用事件委托来减少事件监听器的数量。

    jquery右键菜单

    **jQuery右键菜单**是一种基于JavaScript库jQuery实现的交互式功能,它允许用户在网页上通过鼠标右键点击触发自定义的上下文菜单。这款经典好用的jQuery右键菜单解决方案,提供了丰富的样例,方便开发者快速理解和...

    jQuery下最灵活的右键菜单脚本

    该插件支持多种触发事件,不仅限于鼠标右键点击,还可以通过键盘快捷键或者自定义事件来激活菜单。同时,菜单项可包含图标、分隔符、子菜单等多种元素,满足多样化的界面设计需求。 二、核心特性 1. **灵活配置**...

    jQuery鼠标右键弹出菜单选项.zip

    总结起来,"jQuery鼠标右键弹出菜单选项"是一个利用jQuery实现的交互功能,它涉及到DOM操作、事件监听、样式控制以及可能的业务逻辑。通过学习这个案例,开发者可以深入理解jQuery的工作原理,以及如何优雅地处理...

    query右键插件及其用法

    这个插件的工作原理是监听鼠标右键点击事件,当用户在指定的元素上右键点击时,会触发自定义的右键菜单显示。开发者可以通过插件提供的API来设置菜单项、菜单的样式以及各个菜单项的事件处理函数。 在描述中提到的...

Global site tag (gtag.js) - Google Analytics