【自定义右键菜单】（html,css,js）

最新推荐文章于 2024-03-03 21:38:39 发布

王猫粮

最新推荐文章于 2024-03-03 21:38:39 发布

阅读量148

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_70684059/article/details/129793369

版权

该代码示例展示了如何使用CSS和JavaScript创建一个自定义的右键菜单。当用户在页面上右键点击时，会显示一个200px宽的菜单列表，列表项在鼠标位置附近定位。左键点击时，菜单消失。菜单项的样式在鼠标悬停时改变，且如果菜单超出屏幕边界，会自动调整位置。点击事件用于识别用户是否点击了特定类名的列表项。

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

<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
        width: 200px;
        padding: 10px;
        border: 1px solid black;
        display: none;
        position: absolute;
    }
    ul li:hover{
        background: skyblue;
    }
</style>
<body>
    <ul id="list">
        <li class="aaa">111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <script>
        document.addEventListener("contextmenu",function(evt){
            evt.preventDefault()
            list.style.display="block"
            var x=evt.clientX
            var y=evt.clientY
            if(x>=document.documentElement.clientWidth-list.offsetWidth)
            x=document.documentElement.clientWidth-list.offsetWidth
            if(y>=document.documentElement.clientHeight-list.offsetHeight)
            y=document.documentElement.clientHeight-list.offsetHeight
            list.style.left=x+"px"
            list.style.top=y+"px"
        })
        document.addEventListener("click",()=>{
            list.style.display="none"
        })
        list.onclick=function(evt){
            console.log(evt.target)
            if(evt.target.className==="aaa"){
                console.log(111)
            }

        }
    </script>
</body>

注意：右键单击出现自定义菜单，左击消失