js实现鼠标右键点击后在鼠标右边弹出页面

在JavaScript中，要实现在鼠标右键点击后在右侧弹出一个自定义菜单或信息面板，可以利用HTML5的`contextmenu`事件以及CSS定位来创建效果。以下是简单的步骤：

1. **创建HTML结构**:

<div id="right-click-menu" style="display:none; position:absolute; right:0; top:0;">
  <ul>
    <li>菜单项1</li>
    <li>菜单项2</li>
    <!-- 添加更多的列表项 -->
  </ul>
</div>

这里我们创建了一个隐藏的`<div>`作为菜单，并设置其初始位置在鼠标点击点的右侧。

2. **添加右键点击事件处理程序**:

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

  // 获取点击位置
  var x = e.clientX;
  var y = e.clientY;

  // 显示菜单
  document.getElementById('right-click-menu').style.display = 'block';
  document.getElementById('right-click-menu')
    .style.left = (x + 10) + 'px'; // 添加偏移量，比如10px，根据需求调整
    .style.top = y + 'px'; // 将顶部位置设为鼠标点击处

  // 取消冒泡，防止用户实际点击到菜单项
  return false;
}, false);

这个脚本会在用户右键点击时阻止浏览器的默认上下文菜单，然后计算并显示自定义菜单，使其出现在鼠标右侧。

3. **关闭菜单**:
你可以添加一个点击外部区域或关闭按钮的监听器来隐藏菜单：

document.addEventListener('click', function(e) {
  if (!e.target.matches('#right-click-menu')) {
    document.getElementById('right-click-menu').style.display = 'none';
  }
}, false);

// 或者添加一个右击取消菜单的函数
function hideMenu() {
  document.getElementById('right-click-menu').style.display = 'none';
}

// 绑定右键取消菜单的快捷键或其他触发方式
document.addEventListener('mousedown', function(e) { // 按钮或者键盘快捷键触发
  if (e.button === 2) { // 只有当按下的是鼠标右键时
    hideMenu();
  }
});