jQuery绑定contextmenu事件时event.pageX/pageY定位右键菜单位置错误

问题产生的核心原因 #

• 定位上下文变更：你当前项目中，#contextMenu元素的上层父节点存在设置了position: relative/absolute/fixed的非静态定位元素，导致你给菜单设置的left/top属性是相对于最近的定位父节点计算，而非你预期的整个文档。之前的模板中#contextMenu应该是直接作为body的子元素存在，body默认是静态定位，所以直接使用e.pageX/e.pageY（相对于文档左上角的坐标）不会出现偏移。
• CSS样式冲突：当前项目中dropdown、dropdown-menu类存在额外的样式定义，比如margin、transform: translate()、padding等属性，都会让菜单最终渲染位置和你设置的坐标值产生偏差。另外你贴出的HTML代码中只给内层ul设置了position: static，外层#contextMenu没有设置position: absolute属性的话，left/top配置对静态定位元素完全不生效，菜单会跟着文档流排布，也是常见的偏移原因。
• 滚动偏移影响：如果菜单的父容器存在独立滚动条，或者页面有滚动距离时，你没有将滚动偏移量纳入坐标计算，也会出现错位。

当前硬编码偏移方案的兼容性说明 #

你目前固定减去固定像素值的修复方案无法在所有设备上正常运行：

• 不同设备的浏览器缩放比例、系统DPI设置不同，固定偏移量在100%缩放的设备上正常，在125%、150%等缩放比例下会再次出现偏移。
• 如果后续你调整了菜单的高度、内边距，或者修改了页面布局结构，固定偏移量会直接失效，需要重新调试，维护成本极高。

标准修复方案 #

1. 调整DOM结构，将#contextMenu直接作为body的子元素，避免父级定位上下文的影响。
2. 给#contextMenu添加基础样式：

#contextMenu {
  position: absolute;
  display: none;
  z-index: 99999; /* 确保菜单在最上层显示 */
}

3. 坐标计算可以使用更稳妥的方式，避免滚动偏移影响：

var $contextMenu = $("#contextMenu");
$(document).on("contextmenu", "div[id$='_container'] table tr td", function (e) {
  // 阻止默认右键菜单
  e.preventDefault();
  const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  $contextMenu.css({
    display: "block",
    left: e.clientX + scrollLeft,
    top: e.clientY + scrollTop
  });
  $element = $(this);
  return false;
});
// 点击其他位置关闭菜单
$(document).on("click", function() {
  $contextMenu.hide();
});

内容的提问来源于stack exchange，提问作者AlASAD WAIL