W3Context Online Editor v1.1

<!DOCTYPE html>
<html>
<head>
    <title>HTML oncontextment Attribute Example</title>
    <meta charset="utf-8" />
    <style>
        .position {
            position: absolute;
            width: 1px;
            height: 1px;
            display: none;
        }
        .container {
            width: 120px;
            height: auto;
            border: 1px solid black;
            background: #efffff;
            transition: 0.9s;
        }
        table {
            text-align: left;
            width: 99%;
            margin-left: auto;
            margin-right: auto;
        }
        td {
            font-family: arial;
            font-size: 12px;
            padding: 5px;
            border-bottom: 1px solid #d1d1d1;
            vertical-align: middle;
            text-align: left;
        }
        td:hover {
            background: lightblue;
            transition: 0.6s;
            cursor: pointer;
            border-bottom: 1px solid black;
        }
    </style>
</head>
<body>
    <h2>HTML oncontextment Attribute Example</h2>
    <p>This example is for oncontextmenu event attribute, right click in any of the document area to trigger oncontextmenu  event and execute script to show context menu.</p>
    <div class="position">
        <div class="container">
            <table border="0" cellpadding="2" cellspacing="2">
                <tbody>
                    <tr>
                        <td>Format Document Ctrl+Shift+F<br>
                        </td>
                    </tr>
                    <tr>
                        <td>Cut
                                          Ctrl+X<br>
                        </td>
                    </tr>
                    <tr>
                        <td>Copy            Ctrl+C<br>
                        </td>
                    </tr>
                    <tr>
                        <td>Paste            Ctrl+V<br>
                        </td>
                    </tr>
                    <tr>
                        <td>Option 5<br>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script>
        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";
                    setTimeout(function () {
                        /* Action code goes here */
                        alert("This action is for," + ops[i].textContent);
                    }, 10);
                });
            }
        }
        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;
            }
        });
    </script>
</body>
</html>