当前位置：首页 > JavaScript

js实现右键菜单

2026-01-30 11:11:43JavaScript

实现右键菜单的基本步骤

监听 contextmenu 事件阻止默认行为，创建自定义菜单元素并定位到鼠标点击位置。

document.addEventListener('contextmenu', function(e) {
    e.preventDefault();

    const menu = document.createElement('div');
    menu.style.position = 'absolute';
    menu.style.left = `${e.clientX}px`;
    menu.style.top = `${e.clientY}px`;
    menu.style.backgroundColor = 'white';
    menu.style.border = '1px solid #ccc';
    menu.style.padding = '10px';
    menu.style.zIndex = '1000';

    menu.innerHTML = `
        <div>选项1</div>
        <div>选项2</div>
        <div>选项3</div>
    `;

    document.body.appendChild(menu);

    document.addEventListener('click', function() {
        document.body.removeChild(menu);
    }, { once: true });
});

添加菜单项功能

为每个菜单项绑定点击事件处理函数。

menu.innerHTML = `
    <div class="menu-item">复制</div>
    <div class="menu-item">粘贴</div>
    <div class="menu-item">删除</div>
`;

menu.querySelectorAll('.menu-item').forEach(item => {
    item.addEventListener('click', function() {
        console.log(`执行操作: ${this.textContent}`);
        document.body.removeChild(menu);
    });
});

优化菜单样式和交互

添加CSS样式增强视觉效果，处理菜单外点击关闭。

.menu-item {
    padding: 8px 12px;
    cursor: pointer;
}

.menu-item:hover {
    background-color: #f0f0f0;
}

完整实现示例

结合所有功能的完整代码示例。

document.addEventListener('contextmenu', function(e) {
    e.preventDefault();

    const menu = document.createElement('div');
    menu.className = 'custom-menu';
    menu.style.left = `${e.clientX}px`;
    menu.style.top = `${e.clientY}px`;

    menu.innerHTML = `
        <div class="menu-item">复制</div>
        <div class="menu-item">粘贴</div>
        <div class="menu-item">删除</div>
    `;

    document.body.appendChild(menu);

    menu.querySelectorAll('.menu-item').forEach(item => {
        item.addEventListener('click', function() {
            alert(`执行操作: ${this.textContent}`);
            document.body.removeChild(menu);
        });
    });

    document.addEventListener('click', function closeMenu() {
        if (document.body.contains(menu)) {
            document.body.removeChild(menu);
        }
        document.removeEventListener('click', closeMenu);
    });
});

.custom-menu {
    position: absolute;
    background: white;
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    z-index: 1000;
    min-width: 120px;
}

.menu-item {
    padding: 8px 12px;
    cursor: pointer;
}

.menu-item:hover {
    background: #f5f5f5;
}