硬编码自定义右键菜单无法显示的问题排查咨询

你的实现方式本身是可行的，问题出在代码的几个关键细节上：

核心问题分析 #

• 错误使用setAttribute设置样式：left、top、border-radius属于CSS样式属性，而非HTML元素属性，直接用setAttribute无法生效，必须通过element.style对象修改内联样式。
• DOM加载顺序问题：如果JS代码在DOM未完全渲染时执行，document.getElementById('rClickMenu')会返回null，导致后续操作全部失效。
• 条件语句逻辑混乱：第一个if块中嵌套的高度判断未正确闭合外层大括号，导致样式覆盖逻辑出错。
• 触摸事件访问不安全：直接取e.touches[0]可能因无触摸输入报错，需增加安全判断。

修复后的完整代码 #

HTML（保持不变） #

<section>  
  <div id="rClickMenu">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
  </div>
</section>

CSS（保持不变） #

section #rClickMenu {
    background-color: #ffffff;
    box-shadow: 0 0 20px rgba(37, 40, 42, 0.22);
    color: #000000;
    width: 10em;
    padding: 0.8em 0.6em;
    font-size: 1.3rem;
    position: fixed;
    visibility: hidden;
}

section #rClickMenu div {
    padding: 0.3em 1.2em;
}

section #rClickMenu div:hover {
    cursor: pointer;
}

JS（修复后） #

document.addEventListener('DOMContentLoaded', () => {
    const rMenu = document.getElementById('rClickMenu');

    document.addEventListener("contextmenu", (e) => {
        e.preventDefault();
        // 安全获取鼠标/触摸位置
        const mouseX = e.clientX || (e.touches?.[0]?.clientX || 0);
        const mouseY = e.clientY || (e.touches?.[0]?.clientY || 0);
        const menuHeight = rMenu.getBoundingClientRect().height;
        const menuWidth = rMenu.getBoundingClientRect().width;

        const width = window.innerWidth;
        const height = window.innerHeight;

        // 重置菜单样式，避免历史设置干扰
        rMenu.style.borderRadius = '';
        rMenu.style.left = '';
        rMenu.style.top = '';

        if (width - mouseX <= 200) {
            rMenu.style.borderRadius = "5px 0 5px 5px";
            rMenu.style.left = `${width - menuWidth}px`;
            rMenu.style.top = `${mouseY}px`;

            if (height - mouseY <= 200) {
                rMenu.style.top = `${mouseY - menuHeight}px`;
                rMenu.style.borderRadius = "5px 5px 0 5px";
            }
        } else {
            rMenu.style.borderRadius = "0 5px 5px 5px";
            rMenu.style.left = `${mouseX}px`;
            rMenu.style.top = `${mouseY}px`;

            if (height - mouseY <= 200) {
                rMenu.style.top = `${mouseY - menuHeight}px`;
                rMenu.style.borderRadius = "5px 5px 5px 0";
            }
        }
        
        rMenu.style.visibility = "visible";
    }, { passive: false });

    document.addEventListener("click", function (e) {
        if (!rMenu.contains(e.target)) {
            rMenu.style.visibility = "hidden";
        }
    });
});

修复说明 #

1. 用style对象替代setAttribute设置样式，确保样式正确生效；
2. 将JS代码包裹在DOMContentLoaded事件中，确保DOM加载完成后再获取元素；
3. 修正条件语句嵌套结构，避免逻辑混乱；
4. 增加触摸事件的安全访问，防止无触摸输入时报错；
5. 每次显示菜单前重置样式，避免历史设置干扰位置计算。

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