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

因为最近技术长进缓慢，也没高手带，只能靠自己了，所以想仿个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鼠标右键事件。
使用方法跟其它事件一样

赞 (0)

相关推荐

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

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

    jquery其实本身的事件机制就很完善了,包括了单击,双击,鼠标移入,鼠标移出等.但是却少了一个做事件.就是鼠标右击事件.当然大家也是直接用侦听鼠标按下事件,然后通过if来判断执行相应的函数.造成鼠标右击事件的效果. 但是这不是我想要的,我想要的似乎这个事件可以跟其它事件比如单击事件一样.可以被方便的使用,而不需要每次都去判断.这里通过编写jquery插件的形式扩展,让这个方法可以直接使用$().rightClick();来使用. jQuery的插件主要分3种类型 1.封装对象方法的插件 (这种

  • jQuery检测鼠标左键和右键点击的方法

    本文实例讲述了jQuery检测鼠标左键和右键点击的方法.分享给大家供大家参考.具体分析如下: 这段代码使用jQuery检测鼠标左键和右键点击,可以判断出用户点击了鼠标左键还是鼠标右键,其中考虑到了变态的IE的情况,放心使用. 复制代码 代码如下: $("#someelement").live('click', function(e) {     if((!$.browser.msie && e.button == 0) || ($.browser.msie &&

  • jquery实现人性化的有选择性禁用鼠标右键

    使用比较暴力的手段禁用鼠标右键是不人性化的,所以最好还是有选择性的禁用鼠标右键. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.45it.com/" /> <title>我们</title> <style

  • jquery 禁止鼠标右键并监听右键事件

    禁止鼠标右键: $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 监听右键事件: $(function(){ $('a').mousedown(function(e){ alert(e.which) // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键 return false;//阻止链接跳转 }) }) 如 $('#dow

  • 深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制

    我记得在刚开始接触动态HTML及JavaScript时就接触过关于鼠标右键屏蔽的脚本代码,当时这些代码很多会用在防止浏览者未经允许的复制网页上的文字或者其他内容,后来的实际应用证明这种做法是不符合用户体验的,而且破解的方法也有很多,比如我曾经写过一篇文章讲解如何解除网页禁止复制的办法. 由此可见,限制右键及复制是不明智的做法,但是今天我仍然要谈谈关于禁止网页复制.右键菜单的事儿,因为随着网页APP技术的发展,网页应用和桌面应用之间的界限越来越模糊,有一些桌面程序实际上是由网页配合JavaScri

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

    因为最近技术长进缓慢,也没高手带,只能靠自己了,所以想仿个WEBQQ来锻炼下自己.做之前最好先把必要的东西准备好.jquery其实本身的事件机制就很完善了,包括了单击,双击,鼠标移入,鼠标移出等.但是却少了一个做事件.就是鼠标右击事件.当然大家也是直接用侦听鼠标按下事件,然后通过if来判断执行相应的函数.造成鼠标右击事件的效果. 但是这不是我想要的,我想要的似乎这个事件可以跟其它事件比如单击事件一样.可以被方便的使用,而不需要每次都去判断.这里通过编写jquery插件的形式扩展,让这个方法可以直

  • asp.net jquery无刷新分页插件(jquery.pagination.js)

    asp.net jquery无刷新分页插件(jquery.pagination.js)

    采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果 友情提示:本示例Handler中采用StringBuilder的append方法追加HTML,小数据量可以,但是大数据或是布局常变,建议返回JSON格式的数据,性能和灵活性更好! 1.插件参数列表  2.页面内容: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defaul

  • jquery弹出框插件jquery.ui.dialog用法分析

    本文实例讲述了jquery弹出框插件jquery.ui.dialog用法.分享给大家供大家参考,具体如下: 1. jquery.ui.dialog 官方地址 http://jqueryui.net/dialog/ jquery.ui.dialog是一个非常灵活的模式框,它的官方地址为: http://docs.jquery.com/UI/Dialog 2. 文件引用 要使用jquery.ui.dialog,需要引用两个文件,1个是js,另外1个是css 在contentpage中添加: <scr

  • JQuery模拟实现网页中自定义鼠标右键菜单功能

    JQuery模拟实现网页中自定义鼠标右键菜单功能

    前言 题外话.......最近在开发一个网站项目的时候,需要用到网页自定义右键菜单,在网上看了各路前辈大神的操作,头晕目眩,为了达到目的,突然灵机一动,于是便有了这篇文章. 先放个效果图(沾沾自喜,大神勿喷): 废话不多说,进入正题: 1.首先 我们要禁用掉原网页中右键菜单 //JQuery代码 $(selector).on('contextmenu', function () { return false; }) 这样目标区域的右键菜单就无法使用了 demo1: <!DOCTYPE html>

  • javascript实现在某个元素上阻止鼠标右键事件的方法和实例

    最近在做一个小东西的时候需要在某一个元素上"右击"触发一个自定义菜单,通过自定义的菜单对右击的条目进行编辑.这就要求屏蔽默认的右键菜单 IE和FF下面的元素都有oncontextmenu这个方法,在FF下面只要通过event.preventDefault()方法就可以轻松实现这个效果.IE并不支持这个方法,在IE下面一般是通过触发方法后return false来实现阻止默认事件的. 通常我们使用阻止右键事件是在全局阻止,即在document层面就将右键拦截,现在我想要实现的效果是只在特

  • spreadsheetgear插件屏蔽鼠标右键的方法

    刚开始用的Mouse_up,虽然能捕获事件,但是没有KeyPress事件的Handled属性. 发现一个相对简单的方法. 1.先让窗体类继承IMessageFilter接口2.在构造函数中添加:Application.AddMessageFilter(this);3.在代码中加入: 复制代码 代码如下: public bool PreFilterMessage(ref System.Windows.Forms.Message MyMessage){    //不响应鼠标右键消息    if(My

  • jQuery autocomplate 自扩展插件、自动完成示例代码

    复制代码 代码如下: 不过做了浏览器方面的兼容,经测试兼容IE6+.Firefox3.5+ 首先看看autocomplate.js: ;(function ($) { var index = -1; var timeId; var cssOptions = { "border": "1px solid black", "background-color": "white", "position": &quo

  • jquery 简单图片导航插件jquery.imgNav.js

    熟悉jquery的家伙大概花个5到10分钟就可以搞定了吧.由于这种导 航效果比较通用,LEVIN顺手写了个 jquery插件- 如果你的网站也需要类似的效果,大可拿去直接用或者扩展下:) 如果你也想尝试将某些可重用功能封 装成jquery插件,别忘了看看一般的jquery插件开发过程,另外还有偶的一个jquery插件模板. 复制代码 代码如下: ;(function($) { // Private functions. var p = {}; p.showC = function(opts) {

  • Jquery多选下拉列表插件jquery multiselect功能介绍及使用

    Jquery多选下拉列表插件jquery multiselect功能介绍及使用

    有一个多选的需求,在网上找到了这个插件:multiselect https://github.com/ehynds/jquery-ui-multiselect-widget csdn博客上有这个插件的介绍,不少童鞋都问了这么个问题,怎么获取选中的值?真是个好问题,因为我在看demo的时候也发现了这个问题,呵呵! 先简单说说这个插件: jquery-multiselect 基于Jquery-ui的组件体系. 所以使用它的时候,先得导入jquery-ui相关的js和css哦 特性 •支持点击labe

随机推荐