如何使硬编码的右键菜单出现在屏幕上？

Question

在我自己的编译器上，菜单甚至没有改变一点。当我在这里测试时，它好一点，因为它确实阻止了原来的默认右键菜单。然而，这个硬编码的JS也没有出现。我想问一下这里的代码有什么问题吗，或者就是不能这样工作？

const rMenu = document.getElementById('rClickMenu');

var timeout;
var lastTap = 0;

document.addEventListener("contextmenu", (e) => {
    e.preventDefault();
    let mouseX = e.clientX || e.touches[0].clientX;
    let mouseY = e.clientY || e.touches[0].clientY;
    let menuHeight = rMenu.getBoundingClientRect().height;
    let menuWidth = rMenu.getBoundingClientRect().width;

    let width = window.innerWidth;
    let height = window.innerHeight;
    if (width - mouseX <= 200) { //right corner
        rMenu.setAttribute("border-radius", "5px 0 5px 5px");
        rMenu.setAttribute("left", (width - menuWidth) + "px");
        rMenu.setAttribute("top", mouseY + "px");
        //right bottom
    if (height - mouseY <= 200) {
        rMenu.setAttribute("top", (mouseY - menuHeight) + "px");
        rMenu.setAttribute("border-radius", "5px 5px 0 5px");
        }
    } else { //left
        rMenu.setAttribute("border-radius", "0 5px 5px 5px");
        rMenu.setAttribute("left", mouseX + "px");
        rMenu.setAttribute("top", mouseY + "px");
        //left bottom
        if (height - mouseY <= 200) {
        rMenu.setAttribute("top", (mouseY - menuHeight) + "px");
        rMenu.setAttribute("border-radius", "5px 5px 5px 0");
        }
    }
    
    rMenu.setAttribute("visibility", "visible");
    }, 
    { passive: false }
);

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

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;
}

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

Answer 1

您应该设置

style

属性。

const rMenu = document.getElementById('rClickMenu');

var timeout;
var lastTap = 0;

document.addEventListener("contextmenu", (e) => {
  e.preventDefault();
  let mouseX = e.clientX || e.touches[0].clientX;
  let mouseY = e.clientY || e.touches[0].clientY;
  let menuHeight = rMenu.getBoundingClientRect().height;
  let menuWidth = rMenu.getBoundingClientRect().width;

  let width = window.innerWidth;
  let height = window.innerHeight;
  if (width - mouseX <= 200) { //right corner
    rMenu.style["borderRadius"] = "5px 0 5px 5px"
    rMenu.style["left"] = (width - menuWidth) + "px"
    rMenu.style["top"] = mouseY + "px"
    //right bottom
    if (height - mouseY <= 200) {
      rMenu.style["top"] = (mouseY - menuHeight) + "px"
      rMenu.style["borderRadius"] = "5px 5px 0 5px"
    }
  } else { //left
    rMenu.style["borderRadius"] = "0 5px 5px 5px"
    rMenu.style["left"] = mouseX + "px"
    rMenu.style["top"] = mouseY + "px"
    //left bottom
    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"
  }
});

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;
}

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