jsp实现自定义右键功能选项

Pinkface_

于 2023-07-20 10:11:20 发布

阅读量167

点赞数

文章标签： java javascript 前端

本文链接：https://blog.csdn.net/Pinkface_/article/details/131824055

版权

该代码创建了一个可自定义的右键菜单，当用户右键点击时显示，左键点击时消失。菜单包含‘隐藏’、‘显示’和‘取消’按钮，通过JavaScript控制按钮的显示状态和功能。菜单的位置根据鼠标点击位置动态调整。

摘要由CSDN通过智能技术生成

<head>    
<style>
        .menu {
            width: 120px;
            height: 100px;
            background-color: #f5f5f5;
            border: 1px solid #2f99fb;
            position: absolute;
            display: none;
            text-align: center;

        }

        .cancle {
            position: absolute;
            background-color: #f5f5f5;
            border: 1px solid #ddddfb;
            right: 0px;
            bottom: 0px;
        }
    </style>
</head>


<body>
<!-- 鼠标右键菜单 -->
<div class="menu">
    <input class="btn btn-primary" id="no" type="button" value="隐藏导出按钮" style="margin-top: 3px"/>
    <input class="btn btn-primary" id="yes" type="button" value="显示导出按钮"
           style="position: relative;margin-top: 3px"/>
    <input class="cancle" id="cancle" type="button" value="取消"/>
</div>
<script>

    const menu = document.querySelector(".menu");

    //右键按下，菜单出现在右键位置
    window.oncontextmenu = function (event) {
        //阻止浏览器默认事件
        event.preventDefault();

        //获取右键基于浏览器可视屏幕坐标
        const mouseX = event.clientX;
        const mouseY = event.clientY;
        console.log(mouseX, mouseY);

        //改变菜单位置
        menu.style.top = mouseY + 'px';
        menu.style.left = mouseX + 'px';

        menu.style.display = 'block';
    };

    //左键按下，菜单消失
    window.onmousedown = function () {
        var noyes = document.getElementById("noYes")
        var no = document.getElementById("no")
        var yes = document.getElementById("yes")
        var cancle = document.getElementById("cancle")
        no.onclick = function () {
            console.log("隐藏")
            /*noyes.style.display = "none";*/
            noyes.style.opacity = 0;
            noyes.disabled = true;
            menu.style.display = 'none';
        }
        yes.onclick = function () {
            /*noyes.style.display = "block";*/
            noyes.style.opacity = 1;
            noyes.disabled = false;
            menu.style.display = 'none';
        }
        cancle.onclick = function () {
            menu.style.display = 'none';
        }
    }

</script>
</body>