最近做一个web页面，需求中需要提供右键操作···

当然该右键操作就需要屏蔽浏览器默认的右键操作，一阵搜罗，整理如下（样式神马的就自己去定义吧）

<head>
    <title>RightKeyTestPage</title>

    <style>
        /*右键层*/
        #rightKeyDiv {
            filter: alpha(opacity=80); /*IE滤镜，透明度80%*/
            -moz-opacity: 0.8; /*Firefox私有，透明度80%*/
            opacity: 0.8; /*其他，透明度80%*/
            display: none;
            width: 200px;
            border: solid 1px black;
            background: #808080;
            cursor: pointer;
        }

            #rightKeyDiv ul {
                list-style-type: none;
                display: block;
            }

                #rightKeyDiv ul li {
                    margin-left: -25px;
                }

        .fieldLine {
            width: 400px;
        }
    </style>

    <script src="scripts/jquery-1.8.2.js"></script>
    <script>
        //屏蔽默认右键
        //整个document圈闭屏蔽默认右键
        $(document).bind("contextmenu", function (oEvent) {
            if (!oEvent) oEvent = window.event;
            if (oEvent.button == 2) {
                if (document.all) window.event.returnValue = false;// for IE
                else event.preventDefault();
            }
        });

        //清除右键弹出层
        //在自定义右键绑定元素之外的区域点击鼠标，隐藏弹出的右键菜单
        $(document).bind("mouseup", function (event) {
            if ($(event.target).parent().attr("class") != "fieldLine") {
                $("#rightKeyDiv").hide();
            }
        });

        $(function () {
            //绑定自定义右键
            //将右键操作绑定到input上（随你页面想绑定到哪）
            $(".fieldLine input").each(function () {
                bindRightKeyEvent(this)
            });
        });

        function bindRightKeyEvent(tar) {
            $(tar).live("mouseup", function (oEvent) {
                //tar.onmouseup = function (oEvent) {
                if (!oEvent) oEvent = window.event;
                //event.button=2是右键   貌似IE8以下不支持
                if (oEvent.button == 2) {
                    var h = oEvent.target.offsetTop //+ oEvent.target.offsetHeight;
                    var w = oEvent.target.offsetLeft + oEvent.target.offsetWidth;
                    var x = w;// oEvent.x;
                    var y = h;//oEvent.y;
                    $("#rightKeyDiv").css({ "position": "absolute", "top": y, "left": x, }).show();

                    //绑定右键div中按钮事件
                    //先解绑定在重新绑定
                    //避免上一右键点击元素 绑定的事件被触发
                    $("#rightKeyDiv").find("#up").unbind("click").bind("click", function () {
                        return up(tar);
                    });
                    $("#rightKeyDiv").find("#down").unbind("click").bind("click", function () {
                        return down(tar);
                    });
                    $("#rightKeyDiv").find("#del").unbind("click").bind("click", function () {
                        return del(tar);
                    });
                    $("#rightKeyDiv").find("#add").unbind("click").bind("click", function () {
                        return add(tar);
                    });

                    //if (document.all) window.event.returnValue = false;// for IE
                    //else event.preventDefault();
                }
                else {
                    $("#rightKeyDiv").hide();
                }
            });
        }

        function up(obj) {
            var $pDiv = $(obj).parent();
            if ($pDiv.prev(".fieldLine")) {
                $pDiv.insertBefore($pDiv.prev())
            }
        }
        function down(obj) {
            var $pDiv = $(obj).parent();
            if ($pDiv.next(".fieldLine")) {
                $pDiv.insertAfter($pDiv.next())
            }
        }
        function del(obj) {
            var $pDiv = $(obj).parent();
            if ($pDiv.attr("class") == "fieldLine") {
                $pDiv.remove();
            }
        }
        function add(obj) {
            var $pDiv = $(obj).parent();
            var $cloneDiv = $pDiv.clone();
            $cloneDiv.insertAfter($pDiv);
            var tar = $cloneDiv.find("input")[0];//jQuery对象 转为dom对象
            bindRightKeyEvent(tar);//为新增元素绑定右键事件
        }
    </script>

</head>
<body>

    <div id="editArea">
        <div class="fieldLine">
            <span>1</span><input />
        </div>
        <div class="fieldLine">
            <span>2</span><input />
        </div>
        <div class="fieldLine">
            <span>3</span><input />
        </div>
    </div>

    <div id="rightKeyDiv">
        <ul>
            <li id="add">新增</li>
            <li id="update">修改</li>
            <li id="del">删除</li>
            <li>
                移动
                <ul>
                    <li id="up">上移</li>
                    <li id="down">下移</li>
                </ul>
            </li>
        </ul>
    </div>
</body>