右键自定义菜单

最新推荐文章于 2023-08-09 20:44:07 发布

Whisper_a

最新推荐文章于 2023-08-09 20:44:07 发布

阅读量405

点赞数

分类专栏：实现的各种效果代码

本文链接：https://blog.csdn.net/Whisper_a/article/details/24148405

版权

实现的各种效果代码专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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>

Whisper_a

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
右键自定义菜单

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 修改右键 #con{ width:100%; height: 800px;
复制链接

扫一扫