如何为某些元素启用上下文菜单

<div id="element">右键点击我</div>

<ul id="context-menu">
  <li>菜单项1</li>
  <li>菜单项2</li>
  <li>菜单项3</li>
</ul>

#context-menu {
  display: none;
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 5px;
}

#context-menu li {
  cursor: pointer;
}

#element {
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

var element = document.getElementById('element');
var contextMenu = document.getElementById('context-menu');

element.addEventListener('contextmenu', function(event) {
  event.preventDefault(); // 阻止默认的上下文菜单弹出

  // 设置菜单的位置
  contextMenu.style.left = event.clientX + 'px';
  contextMenu.style.top = event.clientY + 'px';

  // 显示菜单
  contextMenu.style.display = 'block';
});

contextMenu.addEventListener('click', function(event) {
  // 处理菜单项的点击事件
  var target = event.target;
  if (target.tagName === 'LI') {
    var menuItem = target.textContent;
    console.log('点击了菜单项：' + menuItem);
  }

  // 隐藏菜单
  contextMenu.style.display = 'none';
});