自定义右键菜单

当鼠标右击文档的时候，创建一个列表显示在文档中，不要出现默认的菜单。
点击其中的列表项，给这个列表项设置特殊的背景颜色，并弹出列表项中的内容。
点击列表外的位置，就让列表消失。
具体效果图如下：

自定义右键菜单

没有html结构代码，有样式设置：

<style>
    /* 给自定义的右击菜单设置样式 */
    ul.menu{
        list-style: none;
        padding: 0;
        margin: 0;
        width: 200px;
        border: 1px solid #000;
        position: absolute;
        left: 0;
        top: 0;
    }
    ul li{
        height: 30px;
        line-height: 30px;
        margin-bottom: 5px;
    }
</style>

js结构代码：

// 创建列表项内容数组
var arr = ['vue', 'react', 'angular'];
// 右击文档
document.addEventListener('contextmenu', contextmenu)
function contextmenu() {
    // 将之前的ul删除掉
    var menu = document.querySelector('.menu');
    // 如果存在就删除
    if(menu) {
        document.body.removeChild(menu)
    }
    // 获取事件对象 -因为要阻止右击的默认行为
    var e = window.event;
    // 阻止默认行为
    e.returnValue = false;
    // 创建列表
    var ul = document.createElement('ul');
    // 为了好识别 - 给ul设置类名
    ul.className = 'menu';
    // 遍历数组创建li
    for(var i = 0; i < arr.length; i++) {
        // 创建li
        var li = document.createElement('li');
        // 给li添加内容
        li.innerText = arr[i]
        // 将li放到ul中
        ul.appendChild(li)
    }
    // 设置ul的位置 - 从事件对象中获取到鼠标当前点击的位置
    var x = e.pageX;
    var y = e.pageY;
    ul.style.left = x + 10 + 'px';
    ul.style.top = y + 10 + 'px';
    // 把ul放到body中显示
    document.body.appendChild(ul)
    // 通过事件委托给每个列表项添加鼠标移入事件
    ul.addEventListener('mouseover', mouseover)
    // 通过事件委托给每个列表项添加鼠标点击事件
    ul.addEventListener('click', click)
}
// ul的鼠标移入事件处理函数
function mouseover() {
    // 获取事件对象
    var e = window.event;
    // 获取更加具体的目标元素
    var target = e.target || e.srcElement;
    // 判断这个具体的元素是不是li
    if(target.tagName === 'LI') {
        // 将所有li的背景颜色设置成透明的
        for(var i = 0; i < this.children.length; i++) {
            this.children[i].style.backgroundColor = 'transparent';
        }
        // 给当前这个目标元素li设置灰色背景颜色
        target.style.backgroundColor = '#ccc';
    }
}   
// ul的点击事件
function click() {
    // 获取事件对象
    var e = window.event;
    // 获取更加具体的目标元素
    var target = e.target || e.srcElement;
    // 判断这个具体的元素是不是li
    if(target.tagName === 'LI') {
        // 弹出当前li的内容
        alert(target.innerText)
    }
}
// 当鼠标点击到文档中，如果点击的是不是右键就将ul删除掉
document.addEventListener('mousedown', mousedown)
function mousedown() {
    // 获取事件对象
    var e = window.event;
    // 获取鼠标按键信息
    var button = e.button;
    // 如果点击的不是右键 - 就将ul删除
    if(button !== 2) {
        var menu = document.querySelector('.menu');
        // 如果存在就删除
        if(menu) {
            // 如果点击的是列表项 - 需要先弹出内容 - 所以删除的时候，延迟删除
            setTimeout(function() {
                document.body.removeChild(menu)
            }, 150)
        }
    }
}