JS阻止右键菜单（自定义右键菜单）

最新推荐文章于 2024-09-21 11:23:29 发布

东方求败、

最新推荐文章于 2024-09-21 11:23:29 发布

阅读量1.6k

点赞数

分类专栏： javascript复习之路 # javascript基础文章标签： javascript html

本文链接：https://blog.csdn.net/wang_swa99er/article/details/120162153

版权

javascript复习之路同时被 2 个专栏收录

87 篇文章 1 订阅

订阅专栏

javascript基础

77 篇文章 1 订阅

订阅专栏

JS阻止右键菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0px;padding: 0px;}
        #menu{width: 100px;height: 100px;background-color: gray;display: none;position: absolute;}
    </style>
    <script>
        window.onload = function(){
            //官方的右键菜单
            document.oncontextmenu = function(){
                return false;
            }

            /* 
                实现自定义的右键菜单，鼠标按下
                按下的是右键，在右键这个位置显示菜单
                如果按下的是别的键，菜单消失
            */

            var oMenu = document.getElementById("menu");
            document.onmousedown = function(ev){
                var e = ev || window.event;
                if(e.button == 2){
                    oMenu.style.left = e.clientX + 'px';
                    oMenu.style.top = e.clientY + 'px';
                    oMenu.style.display = 'block';
                }else{
                    oMenu.style.display = 'none';
                }
            }
        }
    </script>
</head>
<body>
    <div id = 'menu'>
        <ul>
            <li>菜单1</li>
            <li>菜单2</li>
            <li>菜单3</li>
            <li>菜单4</li>
        </ul>
    </div>
</body>
</html>