js事件中鼠标右键默认事件阻值与替换

css

    span {
        float: left;
        width: 100px;
        height: 100px;
        background-color: red;
    }
     div {
        width: 300px;
        height: 300px;
        background-color: rgb(18, 5, 92);
    }

    .menu {
        position: absolute;
        width: 100px;
        height: 200px;
        background-color: green;
    }

html

    <div class="dome">
    <span></span>
    </div>

js部分

    let dome = document.querySelector(".dome")
    dome.oncontextmenu = function (e) {
        //阻值默认事件
        e.preventDefault();

        let menu = document.querySelector(".menu")

        if (menu) menu.remove()

        menu = document.createElement("div")

        menu.classList.add("menu")

        document.body.appendChild(menu)

        menu.style.left = e.pageX + "px"
        menu.style.top = e.pageY + "px"

        menu.oncontextmenu = function (e) {
            e.preventDefault();
            // menu.style.left = e.pageX + "px"
            // menu.style.top = e.pageY + "px"
        }
        window.onclick = e => {
            let menu = document.querySelector(".menu")
            //判断menu是否存在且不是当前对象
            //contains判断是否包含某某
            //targer某个对象
            // console.log(!menu.contains(e.targer));
            if (menu && !menu.contains(e.target)) menu.remove()
        }

    }