原生js自定义右键菜单-前端开发

下面是关于“原生js自定义右键菜单”的完整攻略。

下面是关于“原生js自定义右键菜单”的完整攻略。

什么是原生js自定义右键菜单

原生JS自定义右键菜单指的是使用原生的JavaScript代码实现自定义右键菜单的功能，不依赖任何第三方库和插件。我们可以通过监听浏览器的右键事件（contextmenu）来实现自定义右键菜单的功能，使用classList、innerHTML等DOM操作相关的API，来动态创建和修改HTML元素，从而达到自定义右键菜单的目的。

实现自定义右键菜单的步骤

监听contextmenu事件
要实现自定义右键菜单，需要先监听contextmenu事件，当用户右键点击浏览器页面时，触发该事件并展示自定义菜单。

document.addEventListener('contextmenu', function (event) {
  event.preventDefault(); // 取消默认右键事件
  // 在这里可以动态创建自定义菜单
});

动态创建自定义菜单
在监听到浏览器的右键事件时，需要通过JavaScript代码动态创建自定义菜单。一般来说，自定义菜单都是使用ul列表来实现，并利用CSS样式对其进行美化。利用innerHTML API可以很方便的插入HTML代码，使用样式控制CSS样式。

document.addEventListener('contextmenu', function (event) {
  event.preventDefault();
  // 创建并插入自定义菜单
  var menu = document.createElement('ul');
  menu.classList.add('context-menu');
  menu.innerHTML = `
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
  `;
  document.body.appendChild(menu);
});

控制菜单的位置和样式
动态创建出自定义菜单后，需要根据鼠标的位置来控制菜单的显示位置。利用getBoundingClientRect API可以获取元素在页面中的位置和大小信息。“提示：如果不加处理，当自定义菜单靠近页面边缘时，会出现遮盖的问题”。

document.addEventListener('contextmenu', function (event) {
  event.preventDefault();
  // 创建并插入自定义菜单
  var menu = document.createElement('ul');
  menu.classList.add('context-menu');
  menu.innerHTML = `
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
  `;
  document.body.appendChild(menu);

  // 控制菜单的位置
  menu.style.left = event.clientX + 'px';
  menu.style.top = event.clientY + 'px';
  menu.style.visibility = 'visible';
});

监听自定义菜单项的点击事件
当用户在自定义菜单上点击某个菜单项时，需要触发点击事件，并执行相关操作。可通过监听click事件来实现。

document.addEventListener('contextmenu', function (event) {
  event.preventDefault();
  // 创建并插入自定义菜单
  var menu = document.createElement('ul');
  menu.classList.add('context-menu');
  menu.innerHTML = `
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
  `;
  document.body.appendChild(menu);

  // 控制菜单的位置
  menu.style.left = event.clientX + 'px';
  menu.style.top = event.clientY + 'px';
  menu.style.visibility = 'visible';

  // 监听自定义菜单项的点击事件
  Array.from(menu.children).forEach(function (li) {
    li.addEventListener('click', function () {
      console.log('点击了：' + li.innerText);
      // 这里可以执行一些操作
      menu.style.visibility = 'hidden';
    });
  });
});

示例说明

示例一：右键菜单弹窗
针对网页中的某一个区域单独设置一个菜单，在菜单项中添加相应的功能。

var elem = document.getElementById('box');
elem.addEventListener('contextmenu', function (event) {
  event.preventDefault();
  // 创建并插入自定义菜单
  var menu = document.createElement('ul');
  menu.classList.add('context-menu');
  menu.innerHTML = `
    <li>查看</li>
    <li>修改</li>
    <li>删除</li>
  `;
  document.body.appendChild(menu);

  // 控制菜单的位置
  menu.style.left = event.clientX + 'px';
  menu.style.top = event.clientY + 'px';
  menu.style.visibility = 'visible';

  // 监听自定义菜单项的点击事件
  Array.from(menu.children).forEach(function (li) {
    li.addEventListener('click', function () {
      console.log('点击了：' + li.innerText);
      switch (li.innerText) {
        case '查看':
          alert('查看按钮点击');
          break;
        case '修改':
          alert('修改按钮点击');
          break;
        case '删除':
          alert('删除按钮点击');
          break;
        default:
          break;
      }
      // 执行完相应操作后关闭右键菜单
      menu.style.visibility = 'hidden';
    });
  });
});

示例二：全局右键菜单
在整个页面中添加一个公共的右键菜单，通过判断所选区域的不同，展示不同的菜单项。

document.addEventListener('contextmenu', function (event) {
  event.preventDefault();
  // 创建并插入自定义菜单
  var menu = document.createElement('ul');
  menu.classList.add('context-menu');
  if (event.target.tagName === 'INPUT') { // 输入框菜单
    menu.innerHTML = `
      <li>复制</li>
      <li>剪切</li>
      <li>粘贴</li>
    `;
  } else if (event.target.tagName === 'IMG') { // 图片菜单
    menu.innerHTML = `
      <li>另存为</li>
    `;
  } else { // 全局菜单
    menu.innerHTML = `
      <li>前进</li>
      <li>后退</li>
      <li>刷新</li>
    `;
  }
  document.body.appendChild(menu);

  // 控制菜单的位置
  menu.style.left = event.clientX + 'px';
  menu.style.top = event.clientY + 'px';
  menu.style.visibility = 'visible';

  // 监听自定义菜单项的点击事件
  Array.from(menu.children).forEach(function (li) {
    li.addEventListener('click', function () {
      console.log('点击了：' + li.innerText);
      // 这里可以执行一些操作
      menu.style.visibility = 'hidden';
    });
  });
});

以上就是关于“原生js自定义右键菜单”的完整攻略，希望能对你有所帮助。