contextmenu的用法

contextmenu是HTML元素的一个属性，用于指定当用户右键点击该元素时显示的上下文菜单。具体用法如下：

1. 在HTML元素中添加contextmenu属性，该属性的值为一个已定义的菜单元素的ID。

<div contextmenu="myMenu">右键点击我</div>

<!-- 定义一个菜单元素 -->
<menu id="myMenu">
  <menuitem label="复制"></menuitem>
  <menuitem label="粘贴"></menuitem>
  <menuitem label="剪切"></menuitem>
</menu>

2. 通过JavaScript动态设置contextmenu属性，可以实现根据不同条件显示不同的菜单。

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

<script>
  var myDiv = document.getElementById('myDiv');
  var myMenu = document.createElement('menu');
  myMenu.innerHTML = '<menuitem label="菜单项1"></menuitem><menuitem label="菜单项2"></menuitem>';

  myDiv.addEventListener('contextmenu', function(e) {
    e.preventDefault();
    myDiv.setAttribute('contextmenu', 'myMenu');
    myMenu.style.display = 'block';
    myMenu.style.left = e.clientX + 'px';
    myMenu.style.top = e.clientY + 'px';
  });

  window.addEventListener('click', function() {
    myDiv.removeAttribute('contextmenu');
    myMenu.style.display = 'none';
  });
</script>

这段代码实现了当用户右键点击myDiv元素时显示一个自定义菜单，当用户单击页面其他区域时隐藏该菜单。