Have you used web apps that doesn't show default browser thingy when you
right click,rather a custom pop up or menu where you clicked?
well you can do that with vanilla js.
so basically the structure is we attach a 'context menu' event listener to the whole document for global click and to a div for local right click.
You can even customize it with vanilla css.
so our HTML is:
<div> <div align="center"> <table border="0" cellpadding="2" cellspacing="2"> <tbody> <tr> <td>Option 1<br> </td> </tr> <tr> <td>Option 2<br> </td> </tr> <tr> <td>Option 3<br> </td> </tr> <tr> <td>Option 4<br> </td> </tr> <tr> <td>Option 5<br> </td> </tr> </tbody> </table> </div></div>css:
.position { position: absolute; width: 1px; height: 1px; z-index: 2; display: none;}.container { width: 220px; height: auto; border: 1px solid black; background: rgb(245, 243, 243);}.container p { height: 30px; font-size: 18px; font-family: arial; width: 99%; cursor: pointer; display: flex; justify-content: center; align-items: center; background: rgb(245, 243, 243); color: black; transition: 0.2s;}.container p:hover { background: lightblue;}td { font-family: arial; font-size: 20px;}td:hover { background: lightblue; transition: 0.2s; cursor: pointer;}js:
var cls = true;var ops;window.onload = function() { document.querySelector(".container").addEventListener("mouseenter", function() { cls = false; }); document.querySelector(".container").addEventListener("mouseleave", function() { cls = true; }); ops = document.querySelectorAll(".container td"); for (let i = 0; i < ops.length; i++) { ops[i].addEventListener("click", function() { document.querySelector(".position").style.display = "none"; }); } ops[0].addEventListener("click", function() { setTimeout(function() { /* YOUR FUNCTION */ alert("Alert 1!"); }, 50); }); ops[1].addEventListener("click", function() { setTimeout(function() { /* YOUR FUNCTION */ alert("Alert 2!"); }, 50); }); ops[2].addEventListener("click", function() { setTimeout(function() { /* YOUR FUNCTION */ alert("Alert 3!"); }, 50); }); ops[3].addEventListener("click", function() { setTimeout(function() { /* YOUR FUNCTION */ alert("Alert 4!"); }, 50); }); ops[4].addEventListener("click", function() { setTimeout(function() { /* YOUR FUNCTION */ alert("Alert 5!"); }, 50); });}document.addEventListener("contextmenu", function() { var e = window.event; e.preventDefault(); document.querySelector(".container").style.padding = "0px"; var x = e.clientX; var y = e.clientY; var docX = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || document.body.offsetWidth; var docY = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || document.body.offsetHeight; var border = parseInt(getComputedStyle(document.querySelector(".container"), null).getPropertyValue('border-width')); var objX = parseInt(getComputedStyle(document.querySelector(".container"), null).getPropertyValue('width')) + 2; var objY = parseInt(getComputedStyle(document.querySelector(".container"), null).getPropertyValue('height')) + 2; if (x + objX > docX) { let diff = (x + objX) - docX; x -= diff + border; } if (y + objY > docY) { let diff = (y + objY) - docY; y -= diff + border; } document.querySelector(".position").style.display = "block"; document.querySelector(".position").style.top = y + "px"; document.querySelector(".position").style.left = x + "px";});window.addEventListener("resize", function() { document.querySelector(".position").style.display = "none";});document.addEventListener("click", function() { if (cls) { document.querySelector(".position").style.display = "none"; }});document.addEventListener("wheel", function() { if (cls) { document.querySelector(".position").style.display= "none"; static = false; }});and done!
see working demo here:Demo
Top comments(3)
- LocationBangkok 🇹🇭
- Joined
There are very few situations in which this is a good idea. Removing access to the standard context menus in a web browser will mostly only serve to irritate the user
Can't answer the question, but just a helpful guide.
Use codeblocks rather than making a single line of code. Use them with three of ` together. I believe you can put a language next to it like this:
dev-to-uploads.s3.amazonaws.com/up...
Also with long pieces of code you can put it in a place like GitHub Gists, Paste in/Hastebin or other sites.
Thanks!
For further actions, you may consider blocking this person and/orreporting abuse
