JavaScript contextmenu MouseEvent

0 0 1 minute read

When we click the right mouse button on our desktop, a menu-like box appears and this box is called the context menu. In JavaScript, a context menu event runs when a user tries to open a context menu. This can be done by clicking the right mouse button.

This article demonstrates executing any operation when we click the right mouse button. For example, we want to change the background color of a box when we click the right mouse button.

Example:

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
 
<body>
    <div class="context">
        <p>
            Click right mouse button
          </p>
    </div>    
      <script>
        // To prevent default operation of right mouse click
        document.addEventListener("contextmenu", (e) => {
          e.preventDefault();
        });
         
        const contextMenu = document.querySelector(".context");
        contextMenu.addEventListener("contextmenu", (e) => {
          e.preventDefault();
          contextMenu.textContent = "zambiatek";
          contextMenu.style = "color:green"
        });
    </script>
</body>
 
</html>