JS自定义右键菜单

前言

最近有个需求要做鼠标右键自定义菜单的功能。一开始以为比较麻烦，后来发现还是比较简单的。

主要是用到click 和 contextmenu两个事件。给dom对象添加事件监听，当鼠标右键时禁用浏览器的默认行为，然后显示出自己自定义的菜单就好。

实现

<div id="item">
    <ul class="custom-context-menu hidden">
        <li id="abc">删除</li>
    </ul>
</div>

let item = document.getElementById('item')

item.addEventListener('contextmenu', (e) => {
    e.preventDefault();
    let menu = item.getElementsByTagName('ul')[0]
    menu.style.top = `${e.clientY}px`;
    menu.style.left = `${e.clientX}px`;
    menu.classList.remove('hidden');

    let menuList = menu.getElementsByTagName('li')
    for (let menuItem of menuList) {
        menuItem.onclick = (e) => {
            console.log("删除了", menuItem.id)
        }
    }
})

item.addEventListener('click', () => {
    let menu = item.getElementsByTagName('ul')[0]
    menu.classList.add('hidden')
})

#item {
    width: 600px;
    height: 300px;
    border: 1px solid #ddd;
}

.custom-context-menu {
    //位置固定
    position: fixed;
    border: 1px solid #ccc;
    font-size: 20px;
}

.custom-context-menu {
    position: fixed;
    border: 1px solid #ccc;
    list-style: none;
    padding: 4px 0;
    border-radius: 4px;
    box-shadow: 0px 2px 6px 2px #ddd;

    li {
        padding: 8px 12px;
        border-bottom: 1px solid #f0f2f5;
        user-select: none;
        transition: all 0.1s;

        &:last-child {
            border-bottom: none;
        }

        &:hover {
            cursor: pointer;
            background-color: #0170fe;
            color: #fff;
        }

        &:active {
            background-color: #f0f2f7;
        }
    }
}

.hidden {
    display: none;
}

效果

问题

最开始是打算用createElement来动态生成dom的，但是通过classList.add() 来添加类时，样式类添加上了，但是样式没有生效。
后来就不如先写好模板，通过display属性来实现是否显示。