鼠标右键弹出自定义菜单框

最新推荐文章于 2024-07-24 18:54:03 发布

m0_64374851

最新推荐文章于 2024-07-24 18:54:03 发布

阅读量239

点赞数 5

文章标签：计算机外设 javascript 前端

本文链接：https://blog.csdn.net/m0_64374851/article/details/139690780

版权

鼠标右键实现新建，复制，粘贴，删除功能

 <style>
    div {
        width: 300px;
        height: 300px;
        background-color: yellow;
        margin: 50px auto;
    }
    ul{
        position: absolute; //必须加绝对定位，否则拿不到鼠标坐标
        display: none;
    }
    ul,li{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    li{
        text-align: center;
        background-color: red;
        color: white;
        line-height: 30px;
        width: 100px;
    }
    li:hover{
        background-color: pink;
    }

<body>
    <div>

    </div>
        <ul>
            <li>新建</li>
            <li>复制</li>
            <li>粘贴</li>
            <li>删除</li>
        </ul>
        <script>
            //先拿dom，用querySelector方法
            var oDiv=document.querySelector('div')
            var oUl=document.querySelector('ul')
            //点击鼠标右键，先阻止默认行为
            oDiv.oncontextmenu = function(e){
                e.preventDefault()

                //鼠标右键点击哪里，就在哪里出现
                oUl.style.display='block'
                //鼠标右键坐标
                var x=e.pageX
                var y=e.pageY
                oUl.style.left=x+'px'
                oUl.style.top=y+'px'
            }

            //定义鼠标监听事件
            oUl.addEventListener('click',function(){
                var target =event.target
                console.log(target.innerHTML+'被点击了')
            })
            //鼠标点击后隐藏功能框
            document.addEventListener('click',function(){
                oUl.style.display ='none'
            })
        </script>
</body>

最后，菜单功能实现如下