如何创建上下文菜单

<div>

<ul>

<li>

<div id="customContextMenu" class="context-menu">
    <ul>
        <li data-action="edit">编辑</li>
        <li data-action="delete">删除</li>
        <li class="separator"></li> <!-- 分隔线 -->
        <li data-action="copy">复制</li>
    </ul>
</div>

<div id="targetElement" style="width: 200px; height: 100px; border: 1px solid #ccc; margin: 50px; display: flex; align-items: center; justify-content: center;">
    右键点击我
</div>

.context-menu {
    display: none; /* 默认隐藏 */
    position: absolute; /* 绝对定位，方便JS控制位置 */
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    z-index: 1000; /* 确保它在其他元素之上 */
    min-width: 120px;
    padding: 5px 0;
    border-radius: 4px;
}

.context-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.context-menu li {
    padding: 8px 15px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}

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

.context-menu .separator {
    height: 1px;
    background-color: #eee;
    margin: 5px 0;
    cursor: default; /* 分隔线不应该有点击效果 */
}

contextmenu

document.addEventListener('DOMContentLoaded', () => {
    const contextMenu = document.getElementById('customContextMenu');
    const targetElement = document.getElementById('targetElement');

    // 阻止浏览器默认的右键菜单
    targetElement.addEventListener('contextmenu', (e) => {
        e.preventDefault(); // 阻止默认行为

        // 显示菜单并定位
        contextMenu.style.display = 'block';
        // 确保菜单不会超出视口，这块需要一些简单的边界检查，我这里先简化处理
        contextMenu.style.left = `${e.clientX}px`;
        contextMenu.style.top = `${e.clientY}px`;
    });

    // 隐藏菜单的逻辑：点击页面任意位置（除了菜单本身）
    document.addEventListener('click', (e) => {
        if (!contextMenu.contains(e.target)) { // 如果点击的不是菜单内部
            contextMenu.style.display = 'none';
        }
    });

    // 处理菜单项点击事件
    contextMenu.addEventListener('click', (e) => {
        const targetLi = e.target.closest('li'); // 找到被点击的li元素
        if (targetLi && !targetLi.classList.contains('separator')) {
            const action = targetLi.dataset.action;
            if (action) {
                console.log(`执行动作: ${action}`);
                // 在这里编写具体的功能逻辑
                alert(`你点击了: ${targetLi.textContent}`);
                contextMenu.style.display = 'none'; // 执行动作后隐藏菜单
            }
        }
    });
});

e.clientX

e.clientY

left

top

e.clientX

left

e.clientX - menuWidth

e.stopPropagation()

e.preventDefault()

e.stopPropagation()

disabled

// 假设我们在targetElement的contextmenu事件里
targetElement.addEventListener('contextmenu', (e) => {
    e.preventDefault();
    // ... 定位菜单的逻辑

    // 动态判断并更新菜单项状态
    const editItem = contextMenu.querySelector('[data-action="edit"]');
    const deleteItem = contextMenu.querySelector('[data-action="delete"]');

    // 假设我们有一个变量来判断是否可编辑
    const canEdit = Math.random() > 0.5; // 模拟条件判断
    if (canEdit) {
        editItem.classList.remove('disabled');
        editItem.style.pointerEvents = 'auto'; // 确保可点击
        editItem.style.opacity = '1';
    } else {
        editItem.classList.add('disabled');
        editItem.style.pointerEvents = 'none'; // 禁用点击
        editItem.style.opacity = '0.5';
    }

    // 确保点击事件处理时也检查这个状态
    // ...
});

opacity

transition

transform

.context-menu {
    /* ... 其他样式 ... */
    opacity: 0;
    visibility: hidden; /* 配合opacity，确保在隐藏时不可交互 */
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    transform: scale(0.95); /* 初始略微缩小 */
    transform-origin: top left; /* 动画原点 */
}

.context-menu.show { /* JS在显示时添加这个类 */
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

<li>

<i>

<span>