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()
    }

}