oncontextmenu如何设置菜单项

avatar
作者
猴君
阅读量:1

要设置oncontextmenu中的菜单项,可以通过以下步骤进行:

  1. 创建一个菜单项列表,其中包含您想要显示在右键菜单中的所有选项。
  2. 在oncontextmenu事件处理程序中,阻止默认的上下文菜单弹出,并在指定位置显示您自定义的菜单项。
  3. 当用户点击菜单项时,执行相应的操作。

下面是一个简单的示例代码:

<!DOCTYPE html> <html> <body>  <div oncontextmenu="showContextMenu(event)">     Right click here to see the context menu </div>  <div id="contextMenu" style="display: none; position: absolute; background: #f9f9f9; border: 1px solid #ccc; padding: 5px;">     <div onclick="alert('Option 1 clicked')">Option 1</div>     <div onclick="alert('Option 2 clicked')">Option 2</div>     <div onclick="alert('Option 3 clicked')">Option 3</div> </div>  <script> function showContextMenu(event) {     event.preventDefault();          var contextMenu = document.getElementById('contextMenu');     contextMenu.style.display = 'block';     contextMenu.style.left = event.clientX + 'px';     contextMenu.style.top = event.clientY + 'px';          document.addEventListener('click', function hideContextMenu() {         contextMenu.style.display = 'none';         document.removeEventListener('click', hideContextMenu);     }); } </script>  </body> </html> 

在上面的示例中,当用户右键点击div元素时,会显示一个自定义的上下文菜单,其中包含三个选项。当用户点击任何一个选项时,会弹出一个警告框显示响应的选项被点击。

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!