Saber 酱的抱枕

当用户在网页中按下鼠标右键时，会触发JavaScript的contextmenu事件。

我们可以先做一个菜单并且隐藏起来，等到用户按下鼠标右键的时候，阻止默认的右键菜单，并在鼠标位置显示我们自己的菜单。

举个例子，在下面的区域里按右键就会显示自定义的右键菜单：

代码如下：

<style>
    #mymenu{width:150px;position:fixed;left:0;top:0;outline:#ddd solid 1px;margin:0;padding:0;display:none;}
    #mymenu li{padding:5px 8px;line-height:26px;list-style:none;cursor:pointer;color:#333;}
    #mymenu li:hover{background:#eee;}
</style>
<ul id="mymenu">
    <li id="item1">aaaaa</li>
    <li id="item2">bbbbb</li>
    <li id="item3">ccccc</li>
</ul>
<script>
    let mymenu = document.querySelector('#mymenu');
    document.documentElement.addEventListener('contextmenu', function (event) {
        event.preventDefault();
        mymenu.style.left = event.clientX + 'px';
        mymenu.style.top = event.clientY + 'px';
        mymenu.style.display = 'block';
    }, false);
    document.documentElement.addEventListener('click', function (event) {
        mymenu.style.display = 'none';
        let id= event.target.id;
        if (id === "item1") {
            console.log('点击的是item1');
        }else if (id === "item2") {
            console.log('点击的是item2');
        }else if (id === "item3") {
            console.log('点击的是item3');
        }
    }, false);
</script>

话说，我没有针对Firefox浏览器的event做兼容，但是也可以正常运行，难道Firefox新版的event不再特立独行了？

ps：这个代码高亮插件对html中的css和js处理很糟糕啊。

使用JavaScript自定义右键菜单