请教一下jquery实现右键菜单

Question

我现在要使用到右键菜单。右键也已经做出来了，思路大致如下：
mousedown
根据鼠标的位置append出右键菜单的内容
但是问题来了，菜单消失有两种情况：
1.左键在菜单之外点击
2.右键重复点击就是这纠结了，于是我干脆每次mousedown都将选择创建的菜单，并remove（）掉。
结果造成无法实现对于菜单某个选项的点击，而是在每一次都实现点击之前菜单都被remove了。。
现在想问一下大神们想要实现右键菜单有没有更好的思路，或者我的可以在哪里进行改进啊？
谢谢啊！

Answer 1

js的事件触发后
可以获取一个event对象 这个对象包含了事件触发后的许多信息 
比如 从他可以获取 触发事件的对象 等等你可以研究下这个对象 
注意 不同浏览器下有点小差异

Answer 2

// create by tony on 2009-04-22
// eg: $("#id").jsRightMenu({
//         menuList:[{ menuName: "右键菜单", clickEvent: "divClick('click1')"}]
//     });
jQuery.fn.extend({
    jsRightMenu: function(options) {
        options = $.extend({
            menuList: []
        }, options);
        return this.each(function() {
            if ($("#div_RightMenu", $(this)).size() == 0) {
                var menuCount = options.menuList.length;
                if (menuCount > 0) {
                    var divMenuList = "<div id=\"div_RightMenu\" class=\"div_RightMenu\">";
                    for (var i = 0; i < menuCount; i++) {
                        divMenuList += "<div class=\"divMenuItem\"  onclick=\"" + options.menuList[i].clickEvent + "\"  onmouseover=\"" + options.menuList[i].mouseoverEvent + "\" onmouseout=\"" + options.menuList[i].mouseoutEvent + "\">" + options.menuList[i].menuName + "</div>";
                    }
                    divMenuList += "</div>";
                    $(this).append(divMenuList);
                    var objM = $(".divMenuItem");
                    $("#div_RightMenu").hide();
                    objM.bind("mouseover", function() {
                        this.style.backgroundColor = "#316ac5";
                        this.style.paddingLeft = "30px";
                    });
                    objM.bind("mouseout", function() {
                        this.style.backgroundColor = '#EAEAEA';
                    });
                }
            }
            this.oncontextmenu = function() {
                var objMenu = $("#div_RightMenu");
                if (objMenu.size() > 0) {
                    objMenu.hide();
                    var event = arguments[0] || window.event;
                    var clientX = event.clientX;
                    var clientY = event.clientY;
                    var redge = document.body.clientWidth - clientX;
                    var bedge = document.body.clientHeight - clientY;
                    var menu = objMenu.get(0);
                    var menuLeft = 0;
                    var menuTop = 0;
                    if (redge < menu.offsetWidth)
                        menuLeft = document.body.scrollLeft + clientX - menu.offsetWidth;
                    else
                        menuLeft = document.body.scrollLeft + clientX;
                    if (bedge < menu.offsetHeight)
                        menuTop = document.body.scrollTop + clientY - menu.offsetHeight;
                    else
                        menuTop = document.body.scrollTop + clientY;
                    objMenu.css({ top: menuTop + "px", left: menuLeft + "px" });
                    objMenu.show();
                    return false;
                }
            }
            document.onclick = function() {
                var objMenu = $("#div_RightMenu");
                if (objMenu.size() > 0) objMenu.hide();
            }
        });
    }
});http://www.cnblogs.com/tonywan/archive/2009/04/23/1441982.html

Answer 3

一:浏览器兼容:IE,Firefox,Chrome,Safari,TT二:js文件// create by tony on 2009-04-22
// eg: $("#id").jsRightMenu({
//         menuList:[{ menuName: "右键菜单", clickEvent: "divClick('click1')"}]
//     });
jQuery.fn.extend({
    jsRightMenu: function(options) {
        options = $.extend({
            menuList: []
        }, options);
        return this.each(function() {
            if ($("#div_RightMenu", $(this)).size() == 0) {
                var menuCount = options.menuList.length;
                if (menuCount > 0) {
                    var divMenuList = "<div id=\"div_RightMenu\" class=\"div_RightMenu\">";
                    for (var i = 0; i < menuCount; i++) {
                        divMenuList += "<div class=\"divMenuItem\"  onclick=\"" + options.menuList[i].clickEvent + "\"  onmouseover=\"" + options.menuList[i].mouseoverEvent + "\" onmouseout=\"" + options.menuList[i].mouseoutEvent + "\">" + options.menuList[i].menuName + "</div>";
                    }
                    divMenuList += "</div>";
                    $(this).append(divMenuList);
                    var objM = $(".divMenuItem");
                    $("#div_RightMenu").hide();
                    objM.bind("mouseover", function() {
                        this.style.backgroundColor = "#316ac5";
                        this.style.paddingLeft = "30px";
                    });
                    objM.bind("mouseout", function() {
                        this.style.backgroundColor = '#EAEAEA';
                    });
                }
            }
            this.oncontextmenu = function() {
                var objMenu = $("#div_RightMenu");
                if (objMenu.size() > 0) {
                    objMenu.hide();
                    var event = arguments[0] || window.event;
                    var clientX = event.clientX;
                    var clientY = event.clientY;
                    var redge = document.body.clientWidth - clientX;
                    var bedge = document.body.clientHeight - clientY;
                    var menu = objMenu.get(0);
                    var menuLeft = 0;
                    var menuTop = 0;
                    if (redge < menu.offsetWidth)
                        menuLeft = document.body.scrollLeft + clientX - menu.offsetWidth;
                    else
                        menuLeft = document.body.scrollLeft + clientX;
                    if (bedge < menu.offsetHeight)
                        menuTop = document.body.scrollTop + clientY - menu.offsetHeight;
                    else
                        menuTop = document.body.scrollTop + clientY;
                    objMenu.css({ top: menuTop + "px", left: menuLeft + "px" });
                    objMenu.show();
                    return false;
                }
            }
            document.onclick = function() {
                var objMenu = $("#div_RightMenu");
                if (objMenu.size() > 0) objMenu.hide();
            }
        });
    }
});
 三:html<div id="divTest">右键菜单显示区域</div>四:使用首先去JQuery的官方网站下载最新版本：http://jquery.com/，然后在页面的<head></head>之间加入下面代码：<script src="../js/jquery-1.3.2.min.js" type="text/javascript"></script><script type="text/javascript">$(function() {
$("#divTest" ).jsRightMenu({
    menuList: [{ menuName: "右键菜单1", clickEvent: "divClick('1')"},
               { menuName: "右键菜单2", clickEvent: "divClick('2')"},
               { menuName: "右键菜单3", clickEvent: "divClick('3')"},
               { menuName: "右键菜单4", clickEvent: "divClick('4')"},
               { menuName: "右键菜单5", clickEvent: "divClick('5')"}
              ]
    });});function divClick(id){
    alert("你点了--右键菜单"+id);
} </script>OK