This is an explanation of the video content.
 用技术延续对ACG的热爱
...
29

 |   | 

JS鼠标右键显示自定义菜单

在JavaScript中，你可以通过监听contextmenu事件来显示自定义的右键菜单。以下是一个简单的示例，展示如何使用document对象来监听鼠标右键点击事件，并显示自定义菜单：

HTML 示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>自定义右键菜单</title>
  <style>
    /* 隐藏默认的上下文菜单 */
    * {
      -webkit-user-select: none;
      /* Safari */
      -ms-user-select: none;
      /* IE/Edge */
      user-select: none;
      -webkit-user-drag: none;
    }

    #menuCard {
      background-color: #ffffff;
      padding: 10px 20px;
      border-radius: 4px;
      box-shadow: 2px 2px 10px #cccccc;
    }

    #menuCard ul {
      list-style: none;
      padding-left: 0px;
    }
  </style>
</head>

<body>

  <h1>右键点击这里</h1>
  <p>试试在这段文字上点击鼠标右键，你会看到一个自定义菜单。</p>

  <script>
    // 创建自定义菜单的DOM元素
    var menu = document.createElement('div');
    menu.style.position = 'absolute';
    menu.style.display = 'none';
    menu.innerHTML = `
        <div id="menuCard">
            <ul>
                <li><a href="#1">选项1</a></li>
                <li><a href="#2">选项2</a></li>
                <li><a href="#3">选项3</a></li>
            </ul>
        </div>
        `;

    document.body.appendChild(menu);

    // 监听右键点击事件
    document.addEventListener('contextmenu', function (event) {
      event.preventDefault(); // 阻止默认的上下文菜单显示

      // 显示自定义菜单
      menu.style.display = 'block';
      menu.style.left = event.pageX + 'px';
      menu.style.top = event.pageY + 'px';

      // 监听菜单项的点击事件
      menu.addEventListener('click', function (e) {
        if (e.target.tagName === 'A') {
          alert('你点击了: ' + e.target.getAttribute('href').substr(1));
        }
        // 隐藏自定义菜单
        menu.style.display = 'none';
      });
    });

    // 监听页面的点击事件，如果点击区域不在菜单内，则隐藏菜单
    document.addEventListener('click', function (event) {
      if (!menu.contains(event.target)) {
        menu.style.display = 'none';
      }
    });
  </script>
</body>

</html>

说明：

  • 我们创建了一个div元素作为自定义菜单，并添加了一些列表项。
  • 使用CSS样式隐藏了默认的上下文菜单。
  • 通过监听contextmenu事件来阻止默认行为，并显示自定义菜单。
  • 将菜单的位置设置为鼠标点击事件的位置。
  • 监听菜单的click事件来处理选项的点击，并在点击后隐藏菜单。
  • 当页面上发生点击事件，如果点击的不是菜单项，则隐藏菜单。

这个示例提供了一个基本的自定义右键菜单实现。你可以根据需要进一步定制样式和行为。

29 🖺前端 ↦ JavaScript开发技巧 __ 172 字
 JavaScript开发技巧 #18