原生JS简易右键菜单

1.效果图

2.kt-contextmenu.js

function createMenu(wrapperId, menuList) {
    if (!wrapperId || !menuList) {
        confirm("请确保入参wrapperId,menuList都存在！");
    }
    if (!Array.isArray(menuList)) {
        confirm("请确保入参menuList的类型为array！");
    }

    const $dest = document.getElementById(wrapperId);// 获取供存储顶级节点
    const currentTime = new Date().getTime();
    const winWidth = document.documentElement.clientWidth || document.body.clientWidth;// 获取菜单显示的位置
    const winHeight = document.documentElement.clientHeight || document.body.clientHeight;

    // 循环菜单JSON
    menuList.forEach(item => {
        // 创建要弹出的菜单节点
        let id = 'menu-' + item.el + '_' + currentTime;
        let oUl = document.createElement('ul');
        oUl.setAttribute('id', id);
        oUl.style.cssText = "font-size: 13px;display: none;width: 130px;border: 1px solid #ccc;position: absolute;box-shadow: 0 0 5px rgba(0, 0, 0, .2);transition: all .1s ease;background-color: #ffffff;"

        item.menu.forEach(menu => {
            let oLi = document.createElement('li');
            oLi.style.cssText = 'display: inline-block;text-align: center;list-style: none;width: 100%;';
            let oA = document.createElement('a');
            oA.style.cssText = 'display: inline-block;text-decoration: none;color: #555;width: 100%;padding: 8px 0;text-align: center;';
            oA.onmouseover = function () {
                this.style.background = '#43a0ff';
                this.style.color = 'white';
            };
            oA.onmouseout = function () {
                this.style.background = 'unset';
                this.style.color = 'unset';
            };
            let textNode = document.createTextNode(menu.text);

            oA.appendChild(textNode);
            oA.onclick = menu.handler;

            oLi.appendChild(oA);
            oUl.appendChild(oLi);
        });

        $dest.appendChild(oUl);

        // 获取要弹出的菜单
        let $menu = document.getElementById(id);
        // 点击其他区域菜单隐藏
        document.addEventListener('click', function () {
            $menu.style.display = 'none';
        });

        // 获取要点击的元素
        let $btn = document.getElementById(item.el);
        // 单击菜单事件
        $btn.onclick = function (event) {
            cleanAllMenu();
            $menu.style.display = 'block';
            let position = getPosition(event, $menu);
            $menu.style.left = position.left + 'px';
            $menu.style.top = position.top + 'px';
            event.stopPropagation();
            return false;
        };
    });

    // 清空所有弹出的菜单
    function cleanAllMenu() {
        menuList.forEach(item => {
            document.getElementById('menu-' + item.el + '_' + currentTime).style.display = 'none';
        })
    }

    // 单击弹出菜单定位
    function getPosition(event, menu) {
        const oEv = event || window.event;
        let l = oEv.clientX, t = oEv.clientY;
        if (l >= (winWidth - menu.offsetWidth)) {
            l = winWidth - menu.offsetWidth;
        }
        if (t > winHeight - menu.offsetHeight) {
            t = winHeight - menu.offsetHeight;
        }
        return {left: l, top: t};
    }
}

3.kt-contextmenu-demo.html

    
    
    
    
    
    
    
    
    



    
        

            KT-CONTEXTMENU-DEMO
        
        
            采集信息
            笔录信息
            现场信息
            技网信息