ChatGPT 问答00004 html 自定义右键

要在 HTML 页面中自定义右键菜单，可以使用 JavaScript 实现。下面是一个简单的例子：

首先，在 <head> 标签中插入以下代码来禁用默认的浏览器右键菜单：

<script>
  // 禁用右键菜单
  document.addEventListener('contextmenu', function (event) {
    event.preventDefault();
  });
</script>

然后，在 <body> 标签中插入以下代码来创建并显示自定义的右键菜单：

<div id="custom-menu" style="display: none;">
  <ul>
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
  </ul>
</div>

<script>
  var menu = document.getElementById('custom-menu');

  // 右键点击事件处理
  document.addEventListener('contextmenu', function (event) {
    event.preventDefault();

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

  // 单击页面任意位置隐藏菜单
  document.addEventListener('click', function () {
    menu.style.display = 'none';
  });
</script>

这个例子创建了一个带有三个菜单项的自定义右键菜单，并在右键点击时显示菜单。当在页面的其他位置单击时，菜单将隐藏起来。你可以根据需要修改菜单项的内容和样式。

posted @ 2023-07-28 21:47  王子健  阅读(13)  评论(0)  编辑  收藏  举报