HTML5 event-contextmenu hide the right-click menu and html5contextmenu

HTML5 event-contextmenu hide the right-click menu and html5contextmenu

When you right-click a window or press Ctrl + on a Mac, the contextmenu event is triggered. By canceling its default action, you can customize the menu.
First, write a menu:

<style>        ul, li {            margin: 0;            padding: 0;        }        #myMenu{            list-style: none;            width: 150px;            border: 1px solid #ccc;            border-bottom: none;            position: absolute;            display: none;        }        #myMenu li{            border-bottom: 1px solid #ccc;            padding: 5px 10px;            cursor: pointer;        }        #myMenu li:hover{            background-color: #ccc;        }    </style>

<Ul id = "myMenu"> <li> right-click what do you want? </Li> <li> source code? </Li> <li> Do You Want To review elements? </Li> </ul>

This is what it looks like:

Add a contextmenu event to the document, and then cancel the default event to display the custom menu:

Var myMenu = document. getElementById ("myMenu"); document. addEventListener ("contextmenu", function (event) {event. preventDefault (); myMenu. style. display = "block"; // obtain the position of myMenu in the mouse and view. style. top = event. clientY + "px"; myMenu. style. left = event. clientX + "px ";});

Of course, you can click here to hide the menu:

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

Setting better-looking css for custom menus will have better results!

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.