右键自定义菜单

来源：互联网发布：曹进德知乎编辑：程序博客网时间：2024/06/11 17:13
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <title>修改右键</title>    <meta http-equiv="content-type" content="text/html;charset=gb2312">    <style type="text/css">        #con{            width:100%;            height: 800px;            border:solid 1px;        }        #con ul{            width:80px;            height: 200px;        }        #con li{            list-style-type: none;        }        #menu{            visibility:hidden;            position: absolute;            border:solid 1px;        }    </style></head><body>    <div id = 'con'>         <div id="menu">            <ul>                <li>1</li>                <li>2</li>                <li>3</li>                <li>4</li>            </ul>         </div>    </div>    <script type="text/javascript">        function getButton(e){            if(document.implementation.hasFeature('MouseEvents','2.0')){                return e.button;            }else{                switch(e.button){                    case 0 :                    case 1 :                    case 3 :                    case 5 :                    case 7:                        return 0;                    case 2 :                    case 6 :                       return 2;                    case 4 :                       return 1;                }            }        }        function down(event){            var num = getButton(event);            var menu = document.getElementById('menu');            if(num === 2){               var pressX = event.clientX;               var pressY = event.clientY;               menu.style.top = pressY + 'px';               menu.style.left = pressX + 'px';               menu.style.visibility = 'visible';            }else if(num === 0){                menu.style.visibility = 'hidden';            }        }        function init(){            var body = document.getElementsByTagName('body')[0];            body.oncontextmenu = function(){                return false;            }            /* var body = document.getElementsByTagName('body')[0];     */            var btn = document.getElementById('con');            btn.addEventListener('mousedown',function(event){                down(event);            },false);        }        window.onload = init;    </script></body></html>
0 0