ASP.NET MVC视图脚本中自定义右键菜单事件仅单次生效问题

• 层级遮挡导致后续事件无法触达目标元素
  全屏定位的.out-click遮罩z-index为1，高于普通文档流中无显式层级的图片元素。第一次右键触发时，代码会将所有遮罩的显示状态设为block，这个覆盖整个视口的遮罩层会挡在所有图片上方。由于遮罩元素本身没有绑定contextmenu右键监听，后续所有右键操作实际触发在遮罩层上，完全无法触达图片的事件逻辑，因此表现为首次右键正常、后续无响应。
• 菜单批量操作逻辑错误
  当前代码触发右键后，会遍历页面上所有.menu元素统一设置坐标、添加显示类，没有建立“当前点击图片-对应专属菜单”的匹配关系，导致多个菜单叠层错乱，进一步加大交互异常概率。
• 循环绑定原生事件的兼容性缺陷
  逐元素循环绑定事件的写法，一旦遇到元素被移除、重新渲染的场景，绑定的事件就会失效，无法支持后续动态加载的图片元素。

1. 修正CSS层级与定位逻辑 #

首先调整两个核心样式，从结构上解决遮挡和定位偏移问题：

• 将.menu的定位方式从absolute改为fixed，适配clientX/clientY的坐标计算逻辑，避免页面滚动时菜单位置偏移
• 将.menu的z-index调整为3，保证其层级高于遮罩层，菜单本身可正常点击操作

修正后的核心样式片段：

.menu {
    display: block;
    background-color: white;
    padding: 10px 0px;
    border-radius: 5px;
    box-shadow: 2px 2px 30px lightgrey;
    position: fixed; /* 替换原absolute定位 */
    transform-origin: center;
    z-index: 3; /* 高于遮罩层的z-index:1 */
    opacity: 0;
    transform: scale(0);
    transition: transform 0.2s, opacity 0.2s;
}

2. 重构JS交互逻辑，替换循环绑定写法 #

用事件委托的方式统一处理所有交互，既解决遮挡导致的事件失效问题，也兼容后续动态渲染的元素：

• 先执行已有的DOM移除逻辑（根据屏幕宽度删除冗余的.div1或.div2容器），再绑定事件，避免对已删除元素做无效操作
• 触发图片右键时，先关闭所有已显示的菜单，再匹配当前点击图片对应的邻接专属菜单，只操作目标菜单元素
• 给遮罩层补充contextmenu事件监听，在遮罩上右键时直接关闭现有菜单、隐藏遮罩，避免遮罩挡住后续的图片右键触发

修正后的核心脚本：

$(document).ready(function () {
    // 先完成DOM裁剪逻辑
    const winWidth = $(window).width();
    if (winWidth <= 800 && winWidth > 600) {
        $(".div2").remove();
    } else {
        $(".div1").remove();
    }

    // 委托绑定图片右键事件
    $(document).on('contextmenu', '.clickable', function(e) {
        e.preventDefault();
        // 关闭所有已激活的菜单
        $('.menu.show').removeClass('show');
        // 定位当前点击图片对应的专属菜单
        const targetMenu = $(this).closest('.column').find('.menu');
        // 设置菜单位置并显示
        targetMenu.css({
            top: `${e.clientY}px`,
            left: `${e.clientX}px`
        }).addClass('show');
        // 显示全屏遮罩
        $('.out-click').css('display', 'block');
    });

    // 委托绑定遮罩点击关闭逻辑
    $(document).on('click', '.out-click', function() {
        $('.menu.show').removeClass('show');
        $(this).css('display', 'none');
    });

    // 委托绑定遮罩层右键逻辑：避免遮罩挡住后续右键操作
    $(document).on('contextmenu', '.out-click', function(e) {
        e.preventDefault();
        $('.menu.show').removeClass('show');
        $(this).css('display', 'none');
    });
});

3. 效果验证要点 #

• 首次右键图片时，对应菜单在鼠标位置弹出，全屏遮罩正常显示
• 菜单弹出状态下，右键任意位置都会关闭菜单，再次右键其他图片可以正常弹出对应菜单，不会出现后续无响应的问题
• 点击遮罩区域时菜单正常关闭，不会残留显示状态

内容的提问来源于stack exchange，提问作者Ana-Maria