自定义鼠标右键菜单

一、创建。

二、思路

    1.页面中创建区域。
    2。设置oncontextmenu。
    3.创建区域的停止原鼠标右击菜单。
    4.创建、获取菜单盒子并添加进区域。
    5.清除初始盒子（保留一个）。
    6.设置右击菜单跟随鼠标光标。
    7.点击右击菜单外取消菜单。

三、设置

//获取demo元素.
let demo = document.querySelector('#demo')
//右击鼠标时触发并打开上下文菜单
demo.oncontextmenu = function (e) {
    e.preventDefault();//demo区域停止原鼠标右击菜单
    let menu = document.querySelector('.menu')//获取盒子menu。
    if(menu) menu.remove()//判断清除初始盒子
    menu = document.createElement('div')//创建盒子。
    menu.classList.add('menu')//添加类
    let menu1 = document.createElement('div')//创建盒子menu1。
    menu1.innerHTML = 'XXXX'盒子menu1添加文本XXXX
    menu.appendChild(menu1)//menu末尾添加新的节点menu1
    document.body.appendChild(menu)//body末尾添加新的节点menu
    //盒子跟随鼠标光标。
    menu.style.left = e.pageX +"px"
    menu.style.top = e.pageY +"px"
}

//全局点击时消失。
window.onclick = e => {
    let menu = document.querySelector('.menu')
    if (menu && !menu.contains(e.target))
    menu.remove()
}