右键菜单事件

<div id="editor-container"></div>

 

<div class="custom-context-menu" id="customContextMenu">

      <ul>

          <li value="copy">创建副本</li>

          <li value="delete" class="ed-bottom-line"><span>移除</span><span class="short-cut">Delete / Backspace</span></li>

          <li value="cancel"><span>撤销</span><span class="short-cut">Ctrl + Z</span></li>

          <li value="recover" class="ed-bottom-line"><span>恢复</span><span class="short-cut">Ctrl / Y</span></li>

          <li value="upone">向上移一层</li>

          <li value="downone">向下移一层</li>

          <li value="uptop">移到最顶层</li>

          <li value="downbottom" class="ed-bottom-line">移到最底层</li>

          <li value="group">创建分组</li>

          <li value="ungroup">解构分组</li>

      </ul>

    </div>

 

 

// 编辑器区域

      const contextArea = document.getElementById('editor-container');

      const customContextMenu = document.getElementById('customContextMenu');

      // 编辑器区域右键菜单监听

      contextArea.addEventListener('contextmenu', (event) => {

        // if (this.app && this.app.editor && this.app.editor.list && this.app.editor.list.length) {

          event.preventDefault(); // 阻止默认的右键菜单

          // 设置自定义菜单的位置

          customContextMenu.style.top = `${event.clientY}px`;

          customContextMenu.style.left = `${event.clientX}px`;

          // 显示自定义菜单

          customContextMenu.style.display = 'block';

          // 获取当前窗口的尺寸

          const windowWidth = window.innerWidth;

          const windowHeight = window.innerHeight;

          // 获取菜单的尺寸

          const menuWidth = customContextMenu.offsetWidth;

          const menuHeight = customContextMenu.offsetHeight;

          // 检查菜单是否超出屏幕

          if (event.clientX + menuWidth > windowWidth) {

            customContextMenu.style.left = `${windowWidth - menuWidth}px`;

          }

          if (event.clientY + menuHeight > windowHeight) {

            customContextMenu.style.top = `${windowHeight - menuHeight}px`;

          }

          // customContextMenu.removeEventListener('click', this.handleContextmenu);

          // 点击自定义菜单的事件监听

          customContextMenu.addEventListener('click', this.handleContextmenu, { once: true });

          // 点击其他地方隐藏自定义菜单

          document.addEventListener('click', this.cancelContextmenu, { once: true }); // 使用{ once: true }这个事件将在触发一次后被自动移除

        // }

      });

 

handleContextmenu(e){

        let type = e.target.getAttribute('value') || e.target.parentNode.getAttribute('value')

        console.log(type)

        // switch (type) {

        //   case 'copy': this.createSameMeta(); break;

        //   case 'selectAll': this.selectAllMeta(); break;

        //   case 'delete': this.removeItems(); break;

        //   case 'cancel': this.cancelOperate(); break;

        //   case 'recover': this.recoverOperate(); break;

        //   case 'align': this.handleSecondContextMenuShow(e); break;

        //   case 'upone':

        //   case 'downone':

        //   case 'uptop':

        //   case 'downbottom': this.moveLevel(type); break;

        //   case 'group':

        //   case 'ungroup': this.groupMeta(type); break

        // }

      },

      cancelContextmenu(event) {

          if (event.button !== 2) { // 只在不是鼠标右键的情况下隐藏菜单

            document.getElementById('customContextMenu').style.display = 'none';

          }

      },

 

#editor-container {

        width: 600px;

        height: 400px;

        background-color: #e9e9e9;

}

/* 样式自定义右键菜单 */

   .custom-context-menu {

      width: 220px;

      font-size: 14px;

      display: none;

      position: absolute;

      z-index: 10;

      background-color: #ffffff;

      // border: 1px solid #ddd;

      border-radius: 4px;

      box-shadow: 2px 2px 10px 4px rgba(0, 0, 0, 0.1);

      opacity: 0.95;

      .ed-bottom-line {

        padding-bottom: 10px;

        border-bottom: 1px solid #e9e9e9;

      }

  }

  .custom-context-menu ul {

      list-style: none;

      margin: 0;

      padding: 10px 0;

  }

  .custom-context-menu ul li {

    color: #333;

    padding: 8px 16px;

    cursor: pointer;

    ed_display_flex(center, space-between);

    .short-cut {

      font-size: 12px;

      color: #999;

    }

  }

  .custom-context-menu ul li:hover {

    background-color: #f7f7f7;

  }

体验参考：简单设计EasyDesign-免费在线设计工具图片处理工具简单设计是一款专业强大的在线设计工具，图片处理工具，包含海报设计、封面图片设计，LOGO设计、图片压缩、图片裁剪、图片格式转换等功能，是一款良心好用的设计神器。https://jiandan.link/app/poster?index=0&com=auto