JS简单实现自定义右键菜单实例

下面我会详细讲解如何简单实现自定义右键菜单的过程。

第一步：HTML结构准备

首先，需要定义一个HTML结构，包含菜单需要绑定的元素。

<!-- 定义需要绑定右键菜单的区域 -->
<div id="menu-wrap">
  <ul id="context-menu" class="context-menu">
    <li class="edit">编辑</li>
    <li class="delete">删除</li>
  </ul>
</div>

第二步：CSS样式设置

接着，需要设置CSS样式，让菜单显示位置、字体等符合需求。

/* 右键菜单的样式设定 */
.context-menu {
  background-color: #fff;
  border: 1px solid #ccc;
  z-index: 9999;
  position: absolute;
  display: none;
  list-style: none;
  padding: 0;
}

/* 菜谱项样式设置 */
.context-menu li {
  padding: 5px 10px;
  cursor: pointer;
}

.context-menu li:hover {
  background-color: #f2f2f2;
}

第三步：JS代码编写

最后，需要编写JS代码，实现右键菜单的显示和功能。

1、绑定右键菜单

首先，需要绑定右键菜单的显示事件，代码如下：

// 绑定右键菜单事件
document.addEventListener('contextmenu', function(e) {

  e.preventDefault(); // 禁用默认的右键菜单事件
  var menu = document.querySelector("#context-menu");

  // 计算菜单显示位置
  var screenWidth = window.innerWidth; // 当前屏幕宽度
  var screenHeight = window.innerHeight; // 当前屏幕高度
  var menuWidth = menu.offsetWidth; // 菜单宽度
  var menuHeight = menu.offsetHeight; // 菜单高度
  var xPos = e.clientX; // 鼠标x坐标位置
  var yPos = e.clientY; // 鼠标y坐标位置

  // 如果距离右边屏幕距离过近，需要调整菜单x坐标位置
  if (xPos + menuWidth > screenWidth) {
    xPos -= menuWidth;
  }

  // 如果距离底部屏幕距离过近，需要调整菜单y坐标位置
  if (yPos + menuHeight > screenHeight) {
    yPos -= menuHeight;
  }

  // 显示右键菜单
  menu.style.left = xPos + "px";
  menu.style.top = yPos + "px";
  menu.style.display = "block";

});

这段代码实现了绑定右键菜单的显示事件，当用户右键单击菜单需要绑定的元素时，会显示一个自定义的右键菜单。

2、设置菜单点击事件

然后，需要给每个菜单项设置点击事件，代码如下：

// 绑定菜单项点击事件
document.addEventListener('click', function(e) {

  var menu = document.querySelector("#context-menu");

  // 如果点击的是菜单项，执行对应的操作
  switch (e.target.className) {
    case "edit":
      // 点击了“编辑”菜单项的操作
      break;
    case "delete":
      // 点击了“删除”菜单项的操作
      break;
  }

  // 隐藏右键菜单
  menu.style.display = "none";

});

这段代码实现了菜单项的点击事件，用户点击每个菜单项时，会执行对应的操作，比如编辑或删除。

示例解释

下面是两个示例，说明如何使用这段代码实现自定义右键菜单的功能。

示例1

在某个网页中，右键单击网页中的一段文字，弹出一个自定义右键菜单，包含“复制”和“粘贴”两个菜单项。用户点击“复制”菜单项后，会将文字复制到剪贴板中。

HTML结构

<div id="menu-wrap">
  <ul id="context-menu" class="context-menu">
    <li class="copy">复制</li>
    <li class="paste">粘贴</li>
  </ul>
  <p>你要复制的文字...</p>
</div>

CSS样式

/* 右键菜单的样式设定 */
.context-menu {
  background-color: #fff;
  border: 1px solid #ccc;
  z-index: 9999;
  position: absolute;
  display: none;
  list-style: none;
  padding: 0;
}

/* 菜谱项样式设置 */
.context-menu li {
  padding: 5px 10px;
  cursor: pointer;
}

.context-menu li:hover {
  background-color: #f2f2f2;
}

JS代码

// 绑定右键菜单事件
document.addEventListener('contextmenu', function(e) {

  e.preventDefault(); // 禁用默认的右键菜单事件
  var menu = document.querySelector("#context-menu");

  // 计算菜单显示位置
  var screenWidth = window.innerWidth; // 当前屏幕宽度
  var screenHeight = window.innerHeight; // 当前屏幕高度
  var menuWidth = menu.offsetWidth; // 菜单宽度
  var menuHeight = menu.offsetHeight; // 菜单高度
  var xPos = e.clientX; // 鼠标x坐标位置
  var yPos = e.clientY; // 鼠标y坐标位置

  // 如果距离右边屏幕距离过近，需要调整菜单x坐标位置
  if (xPos + menuWidth > screenWidth) {
    xPos -= menuWidth;
  }

  // 如果距离底部屏幕距离过近，需要调整菜单y坐标位置
  if (yPos + menuHeight > screenHeight) {
    yPos -= menuHeight;
  }

  // 显示右键菜单
  menu.style.left = xPos + "px";
  menu.style.top = yPos + "px";
  menu.style.display = "block";

});

// 绑定菜单项点击事件
document.addEventListener('click', function(e) {

  var menu = document.querySelector("#context-menu");

  // 如果点击的是菜单项，执行对应的操作
  switch (e.target.className) {
    case "copy":
      // 复制选中的文字
      document.execCommand("copy");
      break;
    case "paste":
      // 粘贴剪贴板中的内容
      document.execCommand("paste");
      break;
  }

  // 隐藏右键菜单
  menu.style.display = "none";

});

示例2

在某个网站后台管理系统的列表页中，右键单击某一行数据，弹出一个自定义右键菜单，包含“编辑”和“删除”两个菜单项。用户点击“删除”菜单项后，会弹出一个确认框，确认是否删除该行数据。

HTML结构

<div id="menu-wrap">
  <ul id="context-menu" class="context-menu">
    <li class="edit">编辑</li>
    <li class="delete">删除</li>
  </ul>
  <table>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
    </tr>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
    </tr>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
    </tr>
  </table>
</div>

CSS样式

/* 右键菜单的样式设定 */
.context-menu {
  background-color: #fff;
  border: 1px solid #ccc;
  z-index: 9999;
  position: absolute;
  display: none;
  list-style: none;
  padding: 0;
}

/* 菜谱项样式设置 */
.context-menu li {
  padding: 5px 10px;
  cursor: pointer;
}

.context-menu li:hover {
  background-color: #f2f2f2;
}

JS代码

// 绑定右键菜单事件
document.addEventListener('contextmenu', function(e) {

  e.preventDefault(); // 禁用默认的右键菜单事件
  var menu = document.querySelector("#context-menu");

  // 计算菜单显示位置
  var screenWidth = window.innerWidth; // 当前屏幕宽度
  var screenHeight = window.innerHeight; // 当前屏幕高度
  var menuWidth = menu.offsetWidth; // 菜单宽度
  var menuHeight = menu.offsetHeight; // 菜单高度
  var xPos = e.clientX; // 鼠标x坐标位置
  var yPos = e.clientY; // 鼠标y坐标位置

  // 如果距离右边屏幕距离过近，需要调整菜单x坐标位置
  if (xPos + menuWidth > screenWidth) {
    xPos -= menuWidth;
  }

  // 如果距离底部屏幕距离过近，需要调整菜单y坐标位置
  if (yPos + menuHeight > screenHeight) {
    yPos -= menuHeight;
  }

  // 显示右键菜单
  menu.style.left = xPos + "px";
  menu.style.top = yPos + "px";
  menu.style.display = "block";

});

// 绑定菜单项点击事件
document.addEventListener('click', function(e) {

  var menu = document.querySelector("#context-menu");

  // 如果点击的是菜单项，执行对应的操作
  switch (e.target.className) {
    case "edit":
      // 点击了“编辑”菜单项的操作
      break;
    case "delete":
      // 点击了“删除”菜单项的操作
      if (confirm("确认删除该行数据？")) {
        e.target.parentNode.parentNode.remove();
      }
      break;
  }

  // 隐藏右键菜单
  menu.style.display = "none";

});

这两个示例可以为我们提供思路，在实际应用中根据需求进行调整和扩展。