js实现自定义右键菜单

下面我给你讲解一下js实现自定义右键菜单的完整攻略。

什么是自定义右键菜单

自定义右键菜单是指在浏览器中点击鼠标右键时弹出的自定义菜单，与浏览器提供的默认菜单不同，它可以根据需求自定义内容。

实现步骤

监听右键事件

首先，我们需要监听浏览器中的右键事件。在Javascript中，右键事件是contextmenu。我们可以通过下面的代码实现：

window.addEventListener('contextmenu', function(e) {
  e.preventDefault(); //阻止默认的右键菜单
  //填写菜单内容
});

生成自定义菜单

在监听到右键事件后，我们需要根据需求生成自定义菜单。菜单一般采用HTML+CSS实现。我们可以通过下面的代码生成一个包含三个选项的菜单：

let menu = document.createElement('div');
menu.setAttribute('id', 'custom-menu');
menu.innerHTML = `
  <div class="item">选项1</div>
  <div class="item">选项2</div>
  <div class="item">选项3</div>
`;

//菜单样式
menu.style.position = 'absolute';
menu.style.background = '#fff';
menu.style.border = '1px solid #666';
menu.style.padding = '10px';
menu.style.zIndex = '9999';
menu.style.cursor = 'pointer';

//将菜单添加到页面中
document.body.appendChild(menu);

绑定菜单选项的事件

在生成菜单后，我们需要绑定每个选项的事件。以选项1为例，我们可以在生成菜单的代码中添加以下代码：

let item1 = menu.querySelector('.item:nth-of-type(1)');
item1.addEventListener('click', function() {
  //选项1的点击事件
});

显示自定义菜单

在完成2和3两个步骤后，我们需要在右键菜单事件中显示生成的菜单。具体实现如下：

window.addEventListener('contextmenu', function(e) {
  e.preventDefault(); //阻止默认的右键菜单

  //显示自定义菜单
  menu.style.left = e.clientX + 'px';
  menu.style.top = e.clientY + 'px';
  menu.style.display = 'block';
});

//隐藏自定义菜单
document.addEventListener('click', function(e) {
  if(menu.style.display === 'block') {
    menu.style.display = 'none';
  }
});

在以上代码中，我们通过设置菜单的left和top属性，让菜单在鼠标右键点击的位置弹出。同时，我们还绑定了页面的click事件，当用户点击页面时隐藏自定义菜单。

示例

下面是两个自定义右键菜单的示例。

示例1：在图片上右键弹出自定义菜单

在这个示例中，我们在网页中显示一张图片，当用户右键在图片上时弹出自定义菜单。菜单包括“保存图片”和“打印图片”两个选项。

HTML代码如下：

<img src="https://picsum.photos/id/237/200/200" alt="图片">

Javascript代码如下：

//生成自定义菜单
let menu = document.createElement('div');
menu.setAttribute('id', 'custom-menu');
menu.innerHTML = `
  <div class="item">保存图片</div>
  <div class="item">打印图片</div>
`;
menu.style.position = 'absolute';
menu.style.background = '#fff';
menu.style.border = '1px solid #666';
menu.style.padding = '10px';
menu.style.zIndex = '9999';
menu.style.cursor = 'pointer';
document.body.appendChild(menu);

//添加菜单选项的事件
let saveItem = menu.querySelector('.item:nth-of-type(1)');
let printItem = menu.querySelector('.item:nth-of-type(2)');
saveItem.addEventListener('click', function() {
  //保存图片的代码
});
printItem.addEventListener('click', function() {
  //打印图片的代码
});

//右键事件
let img = document.querySelector('img');
img.addEventListener('contextmenu', function(e) {
  e.preventDefault();
  menu.style.left = e.clientX + 'px';
  menu.style.top = e.clientY + 'px';
  menu.style.display = 'block';
});

//页面点击事件
document.addEventListener('click', function() {
  menu.style.display = 'none';
});

示例2：自定义表格的右键菜单

在这个示例中，我们在网页中输出一个自定义的表格，在表格上右键时弹出自定义菜单。菜单包括“添加行”和“添加列”两个选项。