原生JS监听鼠标右键事件，禁用默认事件，绑定新的自定义标签的方法

最近在开发的时候，需要对鼠标右键做一个监听，根据查阅文档发现我们可以使用oncontextmenu来对右击事件进行监听，如果要监听全局的话，直接使用window.oncontextmenu来进行绑定。

首先我们要使用e.preventDefault();
禁用的默认的右击事件，然后再添加我们的自定义的内容；

style:

<style>
    .demo {
    
    
        height: 500px;
        width: 500px;
        border: solid 1px red;
        line-height: 500px;
        text-align: center;
    }

    .menu {
    
    
        width: 100px;
        height: 300px;
        background: red;
        position: absolute;
    }
</style>

JS:

	let boxEle = document.getElementById("box");
 		boxEle.oncontextmenu = function (e) {
    
    
        e.preventDefault();
        let menu = document.querySelector('.menu')
        if (menu) menu.remove()
        //创建一个div，添加类
        menu = document.createElement('div')
        menu.classList.add('menu')
        document.body.appendChild(menu)
        // 位置（点在哪出现在哪)
        menu.style.left = e.pageX + 'px'
        menu.style.top = e.pageY + 'px'
    }

  	window.onclick = (e) => {
    
    
        let menu = document.querySelector('.menu')
        //判断当前点击的(e.target)是否在menu里面 如果不在就移除它
        if (menu && !menu.contains(e.target)) {
    
    
            menu.remove();
        } //contains包含
    }

效果图：