JavaScript contextmenu MouseEvent Last Updated : 05 Jan, 2023 Comments Improve Suggest changes Like Article Like Report 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 = "GeeksforGeeks"; contextMenu.style = "color:green" }); </script> </body> </html> Output : Note: Using this method we can perform a lot of things, we can add a menu on our right-click. Comment More infoAdvertise with us Next Article JavaScript contextmenu MouseEvent H hritikrommie Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Events Similar Reads JavaScript MouseEvent Button Property The MouseEvent button property is used to define the left or right-click events. When the mouse button is clicked then it returns an integer value which describes the left, right, or middle mouse button. Syntax: event.button Return Value: This event returns an integer value on mouse click events are 2 min read JavaScript MouseEvent ctrlKey Property The mouseEvent ctrlKey property is used to define whether the ctrl key is pressed or not. It is a boolean value. When the ctrl key is pressed then on click of the mouse buttons it returns true and if it is not pressed then it returns false. Syntax: event.ctrlKey Return Value: It returns a boolean va 1 min read JavaScript onmouse Events The onmouse event is used to define the operation using the mouse. JavaScript onmouse events are: onmouseover and onmouseoutonmouseup and onmousedownonmouseenter and onmouseleave JavaScript onmouseover and onmouseout: The onmouseover and onmouseout events occur when the mouse cursor is placed over s 1 min read Javascript MouseEvent which Property The mouse event which property is used to return a number that corresponds to the pressed mouse button when a mouse event is triggered Syntax: event.which Return value: It returns a number indicating which mouse button is pressed: For left mouse button: 1 is returnedFor middle mouse button: 2 is ret 1 min read HTML DOM MouseEvent The MouseEvent Object handles events that occur when the mouse interacts with the HTML document. There are lots of events that interacts with the HTML document. Mouse Events: Mouse events are the action taken by the user on the web page, like clicking, hovering over, etc. Mouse Events Description on 3 min read Like