Dom应用(二)——右键自定义菜单需求：鼠标右键后菜单如下所示鼠标划入后光标变成小手再页面任意位置点击右键都可以出现菜单

需求：

鼠标右键后菜单如下所示
鼠标划入后光标变成小手
再页面任意位置点击右键都可以出现菜单

步骤

ul->li完成菜单设计
注意下载，分享，重命名有一个下边框为他们加上一个类list
圆角border-radius
光标 pointer：cursor 小手光标
划入之后背景颜色和文字颜色都发生变化
js oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单
event.preventDefault()阻止浏览器的默认行为
获取点击鼠标时的位置 clientX & clientY
注意设置样式的时候要拼上单位"px"
单击时隐藏菜单
点击每一个元素的时候会输出元素的内容(这里innerHtml 和 innerText都可)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        body{
            height: 3000px;
        }
        #menu{
            width: 150px;
            padding: 5px auto;
            border-radius: 5px;
            background: rgba(0, 0,0, 0.2);
            position: absolute;
            left: 0px;
            top: 0px;
            cursor: pointer;
        
        }
        #menu>li{
            list-style: none;
            height: 30px;
            width: 100%;
            text-align: center;
            line-height: 30px;
        }
        #menu>li:hover{
            background: pink;
            color:white;
        }
        #menu>.list{
            border-bottom: 1px solid white;
        }
    </style>
</head>
<body>
    <ul id ="menu">
        <li>打开</li>
        <li class="list">下载</li>
        <li class="list">分享</li>
        <li>移动到</li>
        <li>复制到</li>
        <li class="list">重命名</li>
        <li>删除</li>
    </ul>
    <script>
    var oMenu = document.getElementById("menu")
    var ali = oMenu.getElementsByTagName("li")
    // oncontextmenu 鼠标右键点击是触发
    document.oncontextmenu = function(event){
        event.preventDefault();
        // 阻止浏览器的默认菜单
        var left = event.clientX;
        var top = event.clientY;
        oMenu.style.top = top + "px"
        oMenu.style.left = left + "px"
        oMenu.style.display = "block"
    }

    document.onclick = function(){
        oMenu.style.display = "none";
        // 单击鼠标消失
    }
    
    for(var i = 0;i<ali.length;i++){
        ali[i].index = i;
       ali[i].onclick = function(){
           console.log(ali[this.index].innerText)
       }
    }

    
    </script>
</body>
</html>