JavaScript生成右键菜单

最新推荐文章于 2021-05-31 15:14:54 发布

花花最美腻

最新推荐文章于 2021-05-31 15:14:54 发布

阅读量231

点赞数

分类专栏： html JavaScript 文章标签：右键菜单 dom JavaScript

本文链接：https://blog.csdn.net/qq_38912819/article/details/80599278

版权

html 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

JavaScript

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>右键菜单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #ul1 {
            width: 120px;
            border: 1px solid #999;
            border-radius: 10px;
            list-style: none;
            display: none;
            position: absolute;
        }

        li {
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #555;
            font-size: 12px;
        }

        li:hover {
            background: deepskyblue;
            color: #fff;
        }

        #ul1-1:hover {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        #ul1-2:hover {
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
    </style>
</head>
<body>
<ul id="ul1">
    <li id="ul1-1">设为代办</li>
    <li>设为已读</li>
    <li>置顶邮件</li>
    <li>添加备注</li>
    <li id="ul1-2">删除</li>
</ul>
<script>
    var oUl1 = document.getElementById("ul1");
    var oLi = oUl1.getElementsByTagName("li");
    document.οncοntextmenu= function (e) {/*document下的右键菜单事件*/
        oUl1.style.display = "block";/*显示菜单*/
        var left = e.clientX;/*鼠标点击位置x坐标*/
        var top = e.clientY;
        oUl1.style.left = left + "px";/*设置给left*/
        oUl1.style.top = top + "px";
        return false;
        /*阻止默认行为 默认菜单*/
    };
    for (i = 0; i < oLi.length; i++) {/*循环数组*/
        oLi[i].onclick = function () {/*点击某个li时 隐藏ul*/
            console.log(this.innerHTML);/*控制台输出内容*/
            oUl1.style.display = "none";
        }
    }
    document.οnclick=function () {/*点击整个dom对象都可以隐藏*/
        oUl1.style.display = "none";
    }
</script>

</body>
</html>