设置自定义菜单

思路解析： 1、设置一个盒子

2、获取盒子

    var box = document.querySelector(".box")//只能绑定一定事件，多次绑定上一个会被覆盖'

3、阻止浏览器默认菜单

     box.oncontextmenu = function (e) {
        e.preventDefault()
        
        let meun = document.querySelector(".meun")
        if (meun) meun.remove()
        
        //创建自定义菜单
        meun = document.createElement("div")
        //给菜单添加样式
        meun.classList.add("meun")
        
    /.meun {
        width: 100px;
        height: 300px;
        background-color: #cccccc;
        position: absolute;
    }
        /
        //在盒子内添加菜单
        box.appendChild(meun)
        //设置菜单在鼠标位置出现
        meun.style.left = e.pageX + "px"
        meun.style.top = e.pageY + "px"
    }
    
    
    4、点击全局菜单消失，点击自身不消失
    
      window.onclick = function (e) {
        let meun = document.querySelector(".meun")
        if (meun && !meun.contains(e.target))
        {//判断菜单是否存在且点击的地方是否被菜单包含
        //存在且不在菜单点击内则删除菜单
            meun.remove()
        }


    }