JavaScript：基于特定元素显示和隐藏自定义上下文菜单

    
    
    
    


    

        
自定义上下文菜单演示
    

    

        
请尝试在以下按钮上右键点击，或在页面其他区域右键点击。
        
        这是一个可触发菜单的按钮
        

        
        

            
这个div及其内部的文字都可以触发自定义菜单。
        
        

        
        这是一个普通按钮
    

    
    

        
选项 1
        
选项 2
        
选项 3
    

    

/* 重置基本样式 */
*, ::after, ::before {
    box-sizing: border-box;
}

body, html {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
}

/* 自定义上下文菜单样式 */
#context-menu {
    position: fixed; /* 固定定位，确保滚动时位置不变 */
    z-index: 20000;  /* 确保菜单在最上层 */
    width: 180px;
    background: #ffffff; /* 白色背景 */
    border: 1px solid #ddd; /* 边框 */
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 阴影效果 */
    display: none; /* 默认隐藏 */
    padding: 5px 0; /* 内边距 */
}

#context-menu .item {
    padding: 8px 15px; /* 菜单项内边距 */
    font-size: 14px;
    color: #333; /* 文本颜色 */
    cursor: pointer;
    white-space: nowrap; /* 防止文本换行 */
}

#context-menu .item:hover {
    background-color: #f0f0f0; /* 鼠标悬停背景色 */
}

document.addEventListener('DOMContentLoaded', () => {
    // 获取上下文菜单元素
    const contextMenu = document.getElementById('context-menu');
    // 监听整个文档的右键事件，使用事件委托
    const scope = document.body; // 或者 document

    scope.addEventListener("contextmenu", (event) => {
        // 阻止浏览器默认的上下文菜单
        event.preventDefault();

        // 检查触发事件的元素或其任何祖先元素是否包含 'has-content-menu' 类
        // event.target.classList.contains('has-content-menu') 检查直接点击的元素
        // event.target.closest('.has-content-menu') 检查点击的元素自身或其最近的父级是否包含该类
        if (event.target.classList.contains('has-content-menu') ||
            event.target.closest('.has-content-menu') !== null
        ) {
            // 如果是目标元素，则显示自定义菜单
            contextMenu.style.top = event.clientY + 'px'; // 根据鼠标Y坐标定位
            contextMenu.style.left = event.clientX + 'px'; // 根据鼠标X坐标定位
            contextMenu.style.display = 'block'; // 显示菜单
        } else {
            // 如果不是目标元素，则隐藏菜单
            contextMenu.style.display = 'none';
        }
    });

    // 监听整个文档的点击事件，用于在点击菜单外部时隐藏菜单
    scope.addEventListener("click", (event) => {
        // 检查点击的元素是否在上下文菜单内部
        // event.target.closest('#context-menu') 如果点击的是菜单项或菜单本身，则返回菜单元素
        if (event.target.closest('#context-menu') === null) {
            // 如果点击的不是菜单内部，则隐藏菜单
            contextMenu.style.display = 'none';
        }
    });

    // 为菜单项添加点击事件（可选，根据实际需求）
    contextMenu.addEventListener('click', (event) => {
        const clickedItem = event.target.closest('.item');
        if (clickedItem) {
            console.log(`点击了菜单项: ${clickedItem.textContent}`);
            // 执行相应的操作
            contextMenu.style.display = 'none'; // 点击菜单项后隐藏菜单
        }
    });
});