disabling right-click

what we're building

right-clicking anywhere on the page will no longer open the browser's normal context menu. instead, a small styled box pops up wherever you clicked, showing whatever text or symbols you want, and disappears again on the next click.

step 1 — block the default context menu

the browser fires a contextmenu event right before it opens its own menu. calling preventDefault() on that event stops the browser's menu from ever appearing, without touching anything else on the page:

document.addEventListener("contextmenu", function (e) {
  e.preventDefault();
});

you can also do this inline on the <body> tag, which is a shorter, older-school way of writing the same thing:

<body oncontextmenu="return false">

• document.addEventListener(...): attaches the listener to the whole document, so it catches right-clicks anywhere on the page, not just on one element
• e.preventDefault(): this is the actual line doing the blocking. it tells the browser "don't run your default behavior for this event," and for a contextmenu event, the default behavior is opening the native menu
• oncontextmenu="return false": functionally the same thing, just written as an html attribute instead of javascript. returning false from the handler has the same effect as calling preventDefault()

step 2 — build the replacement menu

add a hidden <ul> anywhere in your html. this is the box that'll appear in place of the browser's menu:

<ul id="context_menu">
  <li>♡ ( ´ ˘ `⑅ )੭)</li>
</ul>

it doesn't have to be a single decorative line, you could list real actions here too (like "copy", "refresh"), each as its own <li> with an onclick. for this tutorial we're keeping it purely decorative: one line of text, no functionality, just a cute lil note in place of the boring default menu.

step 3 — style it

the menu is invisible by default. this is the same styling approach as the custom tooltip: one id, targeted directly with css:

#context_menu {
  background: #FEF8FC;
  border: 1px dotted #AAAAAA;
  letter-spacing: 1px;
  width: auto;
  min-width: 140px;
  font-family: Verdana;
  font-size: 10px;
  position: absolute;
  display: none;
  z-index: 999999999;
  list-style: none;
  margin: 0;
  padding: 0;
}

#context_menu li {
  padding: 8px 10px;
  z-index: 100000;
  cursor: default;
  color: #848484;
  text-align: center;
}

• display: none: hides the menu until we explicitly show it in step 4
• position: absolute: positioned relative to the page, so it stays exactly where you clicked, even if the page is scrolled
• width: auto + min-width: 140px: lets the box grow to fit longer text like the kaomoji, instead of a fixed width that might clip or wrap it awkwardly
• list-style: none: removes the default bullet point that browsers put in front of <li> elements
• z-index: 999999999: keeps the menu above everything else on the page, same reasoning as the tooltip's z-index in the previous tutorial

step 4 — show it on right-click, hide it on click

now wire the menu up to actually appear. this script grabs the click coordinates and moves the menu there, then hides it again the next time you click anywhere:

const menu = document.getElementById("context_menu");

document.addEventListener("contextmenu", function (e) {
  e.preventDefault();
  menu.style.display = "block";
  menu.style.left = e.pageX + "px";
  menu.style.top = e.pageY + "px";
});

document.addEventListener("click", function () {
  menu.style.display = "none";
});

• e.pageX / e.pageY: the exact coordinates of the click, measured from the top-left of the whole page (including any scrolled distance), which is why position: absolute was the right choice in step 3
• menu.style.display = "block": flips the menu from hidden to visible right before positioning it
• the second listener, on plain click: closes the menu the next time you left-click anywhere, so it doesn't just sit open forever

result

right-clicking anywhere on the page now shows your own tiny styled note instead of the browser's default menu. the pattern here is identical to the custom tooltip tutorial: one hidden element, positioned with a bit of javascript, styled entirely with css. once you're comfortable with this, try combining it with the tooltip tutorial's approach to add real clickable actions (copy, save, etc.) inside the menu instead of just decorative text.