js自定义右键菜单

最新推荐文章于 2023-09-15 21:34:18 发布

丿小白丿

最新推荐文章于 2023-09-15 21:34:18 发布

阅读量904

点赞数 1

分类专栏： C# 文章标签： html css

本文链接：https://blog.csdn.net/weixin_50655808/article/details/120673262

版权

C# 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

利用监听window对象的oncontextmenu事件来实现自定义的菜单
首先将菜单隐藏起来，当捕获到右键事件时，将菜单移动到合适位置再显示出来

样式

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .menu {
        background-color:white;
        width: 100px;
        border: 1px solid #ccc;
        position: absolute;
        box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, .2);
        display: none;
    }

        .menu li {
            list-style: none;
            width: 100%;
        }

            .menu li span {
                display: inline-block;
                text-decoration: none;
                color: #555;
                width: 100%;
                padding: 10px 0;
                text-align: center;
                cursor: pointer;
            }

            .menu li:first-of-type {
                border-radius: 5px 5px 0 0;
            }

            .menu li span:hover {
                background: #eee;
                color: #CC1A1A;
            }
</style>

页面

<body style="background-color:green">
    <ul class="menu" id="menu">
        <li><span>复制</span></li>
        <li><span>粘贴</span></li>
        <li><span>刷新</span></li>
        <li><span>其他功能1</span></li>
        <li><span>其他功能2</span></li>
    </ul>
    <h1 style="margin:10% 40%">右键菜单</h1>
</body>

需要引入js

<script src="~/jquery-3.3.1.min.js"></script>

js部分

<script>
   //点击鼠标右键响应函数
    window.oncontextmenu = function (e) {
    
     //对右键菜单进行定位
        if (e.clientX + 100 <= innerWidth) {
            var x = e.clientX;
        }
        else {
            var x = e.clientX - 98;
        }
        if (e.clientY + 140 <= innerHeight) {
            var y = e.clientY;
        }
        else {
            var y = e.clientY - 138;
        }
        console.log($("#menu"))

        $("#menu")[0].style.left = x + 'px';
        $("#menu")[0].style.top = y + 'px';
        $("#menu")[0].style.display = 'block';
        //取消默认的浏览器自带右键
        e.preventDefault();

    }
    //点击选择关闭menu
    document.getElementById('menu').onclick = function () {
        document.getElementById('menu').style.display = 'none';
    }
    //左击界面其他地方关闭menu
    window.onclick = function () {
        document.getElementById('menu').style.display = 'none';
    }

</script>

最终结果

显示图片

丿小白丿

关注

1
点赞
踩
8

收藏

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

**1. 利用监听window对象的oncontextmenu事件来实现自定义的菜单首先将菜单隐藏起来，当捕获到右键事件时，将菜单移动到合适位置再显示出来**样式<style> * { margin: 0; padding: 0; } .menu { background-color:white; width: 100px; border: 1px solid #ccc;
复制链接

扫一扫