调试易

简单的实现一个, 有点多，分开写
mouse.js;if(window.jQuery)(function($){
$.mouse = {
//鼠标初始化
_mouseInit : function(opt){
var self = this;
var id = $(self).attr("id");
//绑定mousedown事件
$(self).bind('mousedown.'+id,function(event){
return self._mouseDown(event);
}).bind('click.'+id,function(event){
if(self._preventClickEvent) {
//阻止鼠标事件冒泡
self._preventClickEvent = false;
event.stopImmediatePropagation();
return false;
}
});
//TODO:prevent text selection in IE
//To fix
// if ($.browser.msie) {
// this._mouseUnselectable = $(this).attr('unselectable');
// $(this).attr('unselectable', 'on');
// }

//
this.start = false;
//获取配置属性
this.options = $.extend(this.options||{},$.mouse.defaults,opt);
},

//
_mouseDestroy : function(){
$(this).unbind('.'+id);
//TODO: Restore text selection in IE
// ($.browser.msie
//&& $(this).attr('unselectable', this._mouseUnselectable));
},
//
_mouseDown : function(event){
// don't let more than one widget handle mouseStart
// TODO: figure out why we have to use originalEvent
event.originalEvent = event.originalEvent || {};
//avoid the event redo
if (event.originalEvent.mouseHandled) {  return; }
// we may have missed mouseup (out of window)
(this._mouseStarted && this._mouseUp(event));
//当前的鼠标按下事件
this._mouseDownEvent = event;
var self = this;

//instead of event.keyCode 
//判断是否是鼠标左键
var btnIsLeft = (event.which==1);
//
var elIsCancel = (typeof this.options.cancel == 'string' ? $(event.target).parents().add(event.target).filter(this.options.cancel).length : false);
if(event.which==3){
this._mouseMenu(event);
return true;
}
//如果点击的是左键，执行_mouseCapture 返回为false,则函数返回
if (!btnIsLeft || elIsCancel || !this._mouseCapture(event)) {
return true;
}

//是否延迟,0 : this.mouseDelayMet = true  
this.mouseDelayMet = !this.options.delay;
if(!this.mouseDelayMet){
this._mouseDelayTimer = setTimeout(function(){
self.mouseDelayMet = true;

},this.options.delay);
}
//distance
if (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) {
this._mouseStarted = (this._mouseStart(event) !== false);
if (!this._mouseStarted) {
event.preventDefault();
return true;
}
}
//当前事件与down事件结合起来，必需保留上下文
this._mouseMoveDelegate = function(event){
return self._mouseMove(event);
}

this._mouseUpDelegate = function(event){
return self._mouseUp(event);
}
//--end
$(document).bind('mousemove.' + $(self).attr("id"),this._mouseMoveDelegate)
.bind('mouseup.' + $(self).attr("id"),this._mouseUpDelegate);
// preventDefault() is used to prevent the selection of text here -
// however, in Safari, this causes select boxes not to be selectable
// anymore, so this fix is needed
($.browser.safari || event.preventDefault());
event.originalEvent.mouseHandled = true;
return true;
},

_mouseCapture : function(event){
return true;
},
_mouseMove : function(event){
// IE mouseup check - mouseup happened when mouse was out of window
if($.browser.msie&&!event.button){
return this._mouseUp(event);
}
//判断拖动是否开始 
if(this._mouseStarted){
this._mouseDrag(event);
return event.preventDefault();
}
//如果不延迟，并且定义了移动距离
if(this._mouseDistanceMet(event)&&this._mouseDelayMet(event)){
//
this._mouseStarted = (this._mouseStart(this._mouseDownEvent,event)!==false);
(this._mouseStarted?this._mouseDrag(event) : this._mouseUp(event));
}
//mouseMove
return !this._mouseStarted;
},
//
_mouseUp : function(event){
$(document).unbind('mousemove.' + $(self).attr("id"),this._mouseMoveDelegate)
.unbind('mouseup.' + $(self).attr("id"),this._mouseUpDelegate);
if(this._mouseStarted){
this._mouseStarted = false;
this._preventClickEvent = (event.target == this._mouseDownEvent.target);
this._mouseStop(event);
}
return false;
},
//
_mouseDistanceMet : function(event){
//distance 
return (Math.max(Math.abs(this._mouseDownEvent.pageX - event.pageX),Math.abs(this._mouseDownEvent.pageY - event.pageY))>= this.options.distance);
},
_mouseDelayMet : function(event){
return this.mouseDelayMet;
},
// to be overriden by extending
_mouseStart: function(event) {},
_mouseDrag: function(event) {},
_mouseStop: function(event) {},
_mouseCapture: function(event) { return true; },
_mouseMenu : function(event){}
};$.mouse.defaults = {
cancel: null,
distance: 0,
delay: 0
};})(jQuery);

<div id="test">选择这段文字，点击邮件，弹出菜单</div>
  
<div id="menu" style="position:absolute;border:1px solid black;visibility: hidden;" ><span style="font-size: 12px;cursor: pointer;">搜索</span></div>$.fn.documentSelection = function()
    {
       if(window.getSelection){
          return window.getSelection().toString();
       }else if(document.getSelection){
          return document.getSelection();
       }else if(document.selection){
          return document.selection.createRange().text;
       }
    };
 
    $(function(){
  var t = $("#test");
  $.extend(t,$.mouse,{
      _mouseCapture : function(event){
return false; 
    },
      _mouseMenu : function(event){
  $(this).bind("contextmenu",function(){
               return false;
});
var text = $(this).documentSelection();
if(text){
    $("#menu").css({
visibility : 'visible',
top : event.pageY + 15,
left : event.pageX
     });
}else{
     alert("no text selected");
}
      }
 
  });
  t._mouseInit();
 
 
  $("#menu").click(function(event){
       //点击搜索处理事件
  });
  $("#menu").hover(function(){
        $(this).find(">span").css({
     color : "red"
        });
    },function(){
        $(this).find(">span").css({
      color : "black"
        });
    });
      });

        $().ready(function() {
            var option = { width: 150, items: [
                            { text: "第一项", icon: "http://jscs.cloudapp.net/images/icons/ico1.gif", alias: "1-1", action: menuAction },
                            { text: "第二项", icon: "http://jscs.cloudapp.net/images/icons/ico2.gif", alias: "1-2", action: menuAction },
                            { text: "第三项", icon: "http://jscs.cloudapp.net/images/icons/ico3.gif", alias: "1-3", action: menuAction },
                            { type: "splitLine" },
                            { text: "组一集合", icon: "http://jscs.cloudapp.net/images/icons/ico4.gif", alias: "1-4", type: "group", width: 170, items: [
                            { text: "组三集合", icon: "http://jscs.cloudapp.net/images/icons/ico4-1.gif", alias: "2-2", type: "group", width: 190, items: [
                            { text: "组3一项", icon: "http://jscs.cloudapp.net/images/icons/ico4-1-1.gif", alias: "3-1", action: menuAction },
                            { text: "组3二项", icon: "http://jscs.cloudapp.net/images/icons/ico4-1-1.gif", alias: "3-2", action: menuAction }
                            ]
                            },
                            { text: "组1一项", icon: "http://jscs.cloudapp.net/images/icons/ico4-2.gif", alias: "2-1", action: menuAction },
                            { text: "组1二项", icon: "http://jscs.cloudapp.net/images/icons/ico4-3.gif", alias: "2-3", action: menuAction },
                            { text: "组1三项", icon: "http://jscs.cloudapp.net/images/icons/ico4-4.gif", alias: "2-4", action: menuAction }
                            ]
                            },
                            { type: "splitLine" },
                            { text: "第四项", icon: "http://jscs.cloudapp.net/images/icons/ico5.gif", alias: "1-5", action: menuAction },
                            { text: "组二集合", icon: "http://jscs.cloudapp.net/images/icons/ico6.gif", alias: "1-6", type: "group", width: 180, items: [
                            { text: "组2一项", icon: "http://jscs.cloudapp.net/images/icons/ico6-1.gif", alias: "4-1", action: menuAction },
                            { text: "组2二项", icon: "http://jscs.cloudapp.net/images/icons/ico6-2.gif", alias: "4-2", action: menuAction }
                            ]
                            }
                            ], onShow: applyrule,
                onContextMenu: BeforeContextMenu
            };
            function menuAction() {
                alert(this.data.alias);
            }
            function applyrule(menu) {               
                if (this.id == "target2") {
                    menu.applyrule({ name: "target2",
                        disable: true,
                        items: ["1-2", "2-3", "2-4", "1-6"]
                    });
                }
                else {
                    menu.applyrule({ name: "all",
                        disable: true,
                        items: []
                    });
                }
            }
            function BeforeContextMenu() {
                return this.id != "target3";
            }
            $("#target,#target2,#target3").contextmenu(option);
        });