js上下文菜单 - 爱码网

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
    <title>temp</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;
            height: 100%;
            width:100%;
        }
        div.box{
            display: none;
            width: 0px;
            background-color: #376956;;
            text-align: center;
            overflow: hidden;
            /*不用动画
           transition: width 0.2s; 
            -webkit-transition: width 0.2s;*/
        }
        div.box ul{
            padding: 0;
            margin: 0;
        }
        div.box li{
            display: block;
            list-style: none;
            border: 1px solid black;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li><a href="javascript:void(0);">增加</a></li>
            <li><a href="javascript:void(0);">删除</a></li>
            <li><a href="javascript:void(0);">修改</a></li>
            <li><a href="javascript:void(0);">查询</a></li>
            <li><a href="javascript:void(0);">进入</a></li>
        </ul>
    </div>
    <script type="text/javascript">
        window.onload = function(){
            document.body.addEventListener("contextmenu",function(event){
                var div = document.getElementsByClassName("box")[0];
                event.preventDefault? event.preventDefault() : window.event.returnValue = false;
                var pointx = event.clientX;
                var pointy = event.clientY;
                div.style.position = "fixed";
                div.style.top = pointy+"px";
                div.style.left = pointx+"px";
                div.style.width = "0px";
                div.style.display = "block";
                /*setTimeout(function(){
                    div.style.width = "100px";
                },100);*/
            });
            window.addEventListener("click",function(event){
                var div = document.getElementsByClassName("box")[0];
                div.style.display = "none";
            });
        };
    </script>
</body>
</html>
结果 js上下文菜单