js contextmenu

contextmenu 是 JavaScript 中的一个事件，用于处理上下文菜单（通常是通过右键点击触发的菜单）的显示和行为。以下是关于 contextmenu 事件的基础概念、优势、类型、应用场景以及常见问题的解答。

基础概念

contextmenu 事件在用户右键点击元素时触发。这个事件可以用来阻止默认的上下文菜单显示，并自定义一个菜单或者执行特定的操作。

优势

用户体验定制：允许开发者根据应用需求定制上下文菜单，提供更符合场景的操作选项。
交互增强：通过上下文菜单，用户可以快速访问与当前选中内容或点击位置相关的功能。
无障碍性：对于依赖键盘操作的用户，上下文菜单提供了便捷的交互方式。

类型

原生上下文菜单：浏览器默认提供的右键菜单。
自定义上下文菜单：通过 JavaScript 和 CSS 创建的菜单，可以完全自定义内容和样式。

应用场景

富文本编辑器：允许用户在文本中右键选择不同的格式化选项。
图片库：提供删除、编辑或分享图片的功能。
数据表格：允许用户对行或列执行特定操作，如复制、粘贴或删除数据。
地图应用：提供标记、测量距离或获取位置信息的选项。

示例代码

以下是一个简单的示例，展示如何使用 contextmenu 事件来阻止默认菜单并显示一个自定义菜单：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Context Menu</title>
<style>
  #customMenu {
    display: none;
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    padding: 5px;
  }
  #customMenu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  #customMenu li {
    padding: 5px;
    cursor: pointer;
  }
  #customMenu li:hover {
    background-color: #f0f0f0;
  }
</style>
</head>
<body>

<div id="content" style="width: 300px; height: 200px; border: 1px solid black;">
  Right-click here to see the custom context menu.
</div>

<div id="customMenu">
  <ul>
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
  </ul>
</div>

<script>
  document.addEventListener('contextmenu', function(event) {
    event.preventDefault(); // 阻止默认的上下文菜单
    const customMenu = document.getElementById('customMenu');
    customMenu.style.display = 'block';
    customMenu.style.left = event.pageX + 'px';
    customMenu.style.top = event.pageY + 'px';
  });

  document.addEventListener('click', function() {
    const customMenu = document.getElementById('customMenu');
    customMenu.style.display = 'none'; // 点击其他地方时隐藏菜单
  });

  document.getElementById('customMenu').addEventListener('click', function(event) {
    event.stopPropagation(); // 防止点击菜单项时隐藏菜单
    alert('You clicked on: ' + event.target.textContent);
  });
</script>

</body>
</html>