JSFiddle - React, Tailwind, and code Playground

by Vignesh Gopalakrishnan

HTML

<body>
<div id="cMenu" style="border: 1px solid green; height: 100px; width: 100px; position: absolute;display:none">
  <ul>
    <li>
      One
    </li>

    <li>
      Two
    </li>

    <li>
      Three
    </li>
    
  </ul>
  </div>
</body>

JavaScript

if (document.addEventListener) {
        document.addEventListener('contextmenu', function(e) {
            document.getElementById('cMenu').style.top = e.clientY+"px";
            document.getElementById('cMenu').style.left = e.clientX+"px";
            document.getElementById('cMenu').style.display="block";
            console.log(e);
            e.preventDefault();
        }, false);
    } else {
        document.attachEvent('oncontextmenu', function() {
            alert("You've tried to open context menu");
            window.event.returnValue = false;
        });
    }