最近在开发的时候，需要对鼠标右键做一个监听，根据查阅文档发现我们可以使用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包含}
效果图：
