js自定义右键菜单

<style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 100px;
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            border: 1px solid black;
            border-bottom: 0;
        }

        li {
            list-style: none;
            border-bottom: 1px solid black;
            cursor: pointer;
        }
    </style>

<ul>
        <li>新建</li>
        <li>剪切</li>
        <li>复制</li>
        <li>粘贴</li>
    </ul>

    <script>
        var oMenu = document.querySelector('ul')

        document.oncontextmenu = function (e) {
            var ev = event || e;
            ev.preventDefault();
            var x = ev.x, y = ev.y;
            oMenu.style.cssText = `display:block;left:${x}px;top:${y}px`;
        }

        document.onclick = function (e) {
            var ev = event || e;

            var target = ev.target || ev.srcElement;

            if (target.tagName == 'LI') {
                console.log(target.innerHTML);
            }

            oMenu.style.display = 'none';
        }
    </script>