如何使用list在每个ContexMenu项上添加点击事件？

在软件开发中，为列表（List）中的每个上下文菜单（ContextMenu）项添加点击事件是一个常见的需求。以下是如何实现这一功能的详细步骤和相关概念。

基础概念

List（列表）：一种数据结构，用于存储一系列元素。
ContextMenu（上下文菜单）：一种用户界面元素，通常在用户右键点击某个对象时显示，提供与该对象相关的操作选项。
事件处理（Event Handling）：编程中用于响应用户操作或其他系统事件的过程。

实现步骤

以下是一个使用JavaScript和HTML实现这一功能的示例：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Context Menu Example</title>
    <style>
        #contextMenu {
            display: none;
            position: absolute;
            background: white;
            border: 1px solid #ccc;
            padding: 5px;
        }
        #contextMenu ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        #contextMenu li {
            padding: 5px;
            cursor: pointer;
        }
        #contextMenu li:hover {
            background: #f0f0f0;
        }
    </style>
</head>
<body>
    <div id="itemList">
        <div class="item" data-id="1">Item 1</div>
        <div class="item" data-id="2">Item 2</div>
        <div class="item" data-id="3">Item 3</div>
    </div>
    <div id="contextMenu">
        <ul>
            <li id="edit">Edit</li>
            <li id="delete">Delete</li>
        </ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
    const itemList = document.getElementById('itemList');
    const contextMenu = document.getElementById('contextMenu');

    itemList.addEventListener('contextmenu', function(event) {
        event.preventDefault();
        const x = event.pageX;
        const y = event.pageY;
        contextMenu.style.display = 'block';
        contextMenu.style.left = `${x}px`;
        contextMenu.style.top = `${y}px`;

        const itemId = event.target.getAttribute('data-id');
        document.getElementById('edit').addEventListener('click', function() {
            console.log(`Edit item with ID: ${itemId}`);
            // 在这里添加编辑逻辑
        });

        document.getElementById('delete').addEventListener('click', function() {
            console.log(`Delete item with ID: ${itemId}`);
            // 在这里添加删除逻辑
        });
    });

    document.addEventListener('click', function() {
        contextMenu.style.display = 'none';
    });
});