自定义Context Menu在Table单元格点击时定位异常问题

问题描述 #

点击页面空白区域时右键菜单定位正常，但点击表格内单元格时，菜单会偏离点击位置。

问题原因 #

1. 坐标基准错误：使用e.offsetX/e.offsetY获取的是点击位置相对于触发元素（如表格单元格）的局部坐标，而非整个文档的绝对坐标，导致菜单定位基准错位。
2. 选择器语法错误：获取右键菜单元素时，缺少类选择器的.符号，$("wrapper_contextMenu")无法正确选中目标元素。

修复后的完整JavaScript代码 #

$(document).ready(function() {
  // 修正类选择器，添加.符号
  const contextMenu = $(".wrapper_contextMenu");

  $(document).on("contextmenu", function(e) {
    e.preventDefault();

    // 使用pageX/pageY获取文档级绝对坐标
    let x = e.pageX,
        y = e.pageY,
        winWidth = window.innerWidth,
        winHeight = window.innerHeight,
        cmWidth = contextMenu.width(),
        cmHeight = contextMenu.height();

    // 处理菜单超出视口的边界情况
    x = x > winWidth - cmWidth ? winWidth - cmWidth - 5 : x;
    y = y > winHeight - cmHeight ? winHeight - cmHeight - 5 : y;

    contextMenu.css({
      left: `${x}px`,
      top: `${y}px`,
      visibility: "visible"
    });
  });

  $(document).on("click", function() {
    contextMenu.css("visibility", "hidden");
  });

  $("#data-table").on("click", function(e) {
    if (!e.ctrlKey && $(e.target).prop("tagName") !== "TD") {
      const selectedRows = $("#data-table .selected");
      selectedRows.removeClass("selected");
    }
  });

  $("#data-table").on("click", "td", function(e) {
    if (e.ctrlKey) {
      const tr = $(e.target).closest("tr");
      tr.addClass("selected");
      console.log(tr);
    }
  });

  $(document).on("click", function(e) {
    if (!e.ctrlKey && $(e.target).prop("tagName") !== "TD") {
      const selectedRows = $("#data-table .selected");
      selectedRows.removeClass("selected");
    }
  });
});

核心修改说明 #

• 替换坐标取值：将e.offsetX/e.offsetY改为e.pageX/e.pageY，确保获取点击位置相对于整个文档的绝对坐标，统一定位基准。
• 修正选择器：将$("wrapper_contextMenu")改为$(".wrapper_contextMenu")，正确匹配类名为wrapper_contextMenu的DOM元素。

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