js实现右键自定义菜单栏

document.addEventListener('contextmenu', function(event) {
    event.preventDefault();
    showCustomMenu(event);
});

function showCustomMenu(event) {
    // 创建菜单容器
    let menu = document.createElement('div');
    menu.className = 'custom-menu';
    menu.innerHTML = `
        <ul>
            <li id="copy">复制</li>
            <li id="paste">粘贴</li>
            <li id="delete">删除</li>
        </ul>
    `;
    document.body.appendChild(menu);

    // 定位菜单
    menu.style.left = `${event.pageX}px`;
    menu.style.top = `${event.pageY}px`;

    // 绑定点击事件
    document.addEventListener('click', hideMenu);
}

function hideMenu() {
    let menu = document.querySelector('.custom-menu');
    if (menu) {
        menu.remove();
    }
    document.removeEventListener('click', hideMenu);
}

document.getElementById('copy').addEventListener('click', function() {
    console.log('复制操作');
    hideMenu();
});

// 类似的为其他菜单项添加事件处理函数

let rect = menu.getBoundingClientRect();
menu.style.left = `${rect.left + window.scrollX}px`;
menu.style.top = `${rect.top + window.scrollY}px`;