前天做了关于右键屏蔽的一点小东西，想到现在大家都在做平台，都会有右键菜单，于是也抽空写了一个玩玩~

猛击demo

  1. /*  
  2. *@Description: 右键弹出菜单插件  
  3. *@Param obj:   触发菜单区域  
  4. *@Param menu:  菜单对象  
  5. *@Param offX:  偏移x值  
  6. *@Param offX:  偏移y值  
  7. *@Author:      sev7n(2010-11-03)  
  8. *@Update:  
  9. */  
  10.   
  11. var rightMenu = function(options){   
  12.   
  13.     var defaults = {   
  14.             obj:document, menu:“#context-menu”, offX:5, offY:5   
  15.         },   
  16.         options = $.extend({},defaults,options);   
  17.   
  18.     this.options = options;   
  19.     this.options.obj = $(this.options.obj);   
  20.     this.options.menu = $(this.options.menu);   
  21.   
  22.     this.init();   
  23. };   
  24.   
  25. // 初始   
  26. rightMenu.prototype.init = function() {   
  27.     var that = this,   
  28.         $obj = that.options.obj,   
  29.         $menu = that.options.menu;   
  30.   
  31.     // 屏蔽右键   
  32.     $obj.bind(“contextmenu”,function(){   
  33.         return false;   
  34.     });   
  35.   
  36.     // 右键触发菜单弹出   
  37.     $obj.mousedown(function(evt){   
  38.         evt = evt || window.event;   
  39.         if (evt.button === 2 ) {   
  40.             that.mouseCoords(evt);   
  41.         } else {   
  42.             $menu.hide();   
  43.         }   
  44.     });   
  45. }   
  46.   
  47. // 点击坐标   
  48. rightMenu.prototype.mouseCoords = function(evt) {   
  49.     var that = this,   
  50.         coord = {};   
  51.   
  52.     if(evt.pageX || evt.pageY){   
  53.         coord = {x:evt.pageX, y:evt.pageY};   
  54.     } else {   
  55.         coord = {x:evt.clientX, y:evt.clientY + document.body.scrollTop};   
  56.     }   
  57.   
  58.     that.rightMenuOut(coord);   
  59. }   
  60.   
  61. // 菜单弹出   
  62. rightMenu.prototype.rightMenuOut = function(coord) {   
  63.     var that = this,   
  64.         opts = that.options,   
  65.         $menu = opts.menu,   
  66.         $window = $(window),   
  67.         _menuW = $menu.outerWidth(),   
  68.         _menuH = $menu.outerHeight(),   
  69.         _winW = $window.width(),   
  70.         _winH = $window.height() + document.body.scrollTop,   
  71.         _cX = coord.x,   
  72.         _cY = coord.y;   
  73.   
  74.     // 靠近边框判断   
  75.     _cX = (_menuW + _cX + opts.offX) < _winW ? (_cX + opts.offX) : (_cX - _menuW - opts.offX);   
  76.     _cY = (_menuH + _cY + opts.offY) < _winH ? (_cY + opts.offY) : (_cY - _menuH - opts.offY);   
  77.   
  78.     $menu.css({‘left’:_cX, ’top’:_cY}).fadeIn(200).mousedown(function(){   
  79.         // 屏蔽菜单上的点击   
  80.         return false;   
  81.     });   
  82. }  

调用方法：

  1. new rightMenu({obj:document, menu:“#context-menu”, offX:10, offY:5});  

代码很简单：

  • 绑定contextmenu屏蔽右键
  • 获取右键点击坐标
  • 判断菜单是否距离窗口，如果挨着窗口改变位置
  • 显示菜单，屏蔽菜单点击事件

PS：文件编码不一致会导致IE6下JS报 outside of function、Syntax error 等错误，第二次遇到了，警告下自己。
再PS：图片背景用了CSS3的background-size:cover;在低版本浏览器中背景会有问题 但右键菜单功能无碍~
热烈欢迎各种提BUG及代码改进建议~