Hoe voeg ik een aangepast rechtsklikmenu toe aan een webpagina?

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;
    }
});

.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;
}

<div class="position">
    <div class="container" align="center">
        <table style="text-align: left; width: 99%; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">
            <tbody>
                <tr>
                    <td style="vertical-align: middle; text-align: center;">Option 1<br>
                    </td>
                </tr>
                <tr>
                    <td style="vertical-align: middle; text-align: center;">Option 2<br>
                    </td>
                </tr>
                <tr>
                    <td style="vertical-align: middle; text-align: center;">Option 3<br>
                    </td>
                </tr>
                <tr>
                    <td style="vertical-align: middle; text-align: center;">Option 4<br>
                    </td>
                </tr>
                <tr>
                    <td style="vertical-align: middle; text-align: center;">Option 5<br>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Antwoord 13

Je kunt het doen met deze code.
bezoek hier voor de volledige tutorial met automatische randdetectie http://www.voidtricks.com /custom-right-click-context-menu/

$(document).ready(function () {
 $("html").on("contextmenu",function(e){
        //prevent default context menu for right click
        e.preventDefault();
        var menu = $(".menu"); 
        //hide menu if already shown
        menu.hide(); 
        //get x and y values of the click event
        var pageX = e.pageX;
        var pageY = e.pageY;
        //position menu div near mouse cliked area
        menu.css({top: pageY , left: pageX});
        var mwidth = menu.width();
        var mheight = menu.height();
        var screenWidth = $(window).width();
        var screenHeight = $(window).height();
        //if window is scrolled
        var scrTop = $(window).scrollTop();
        //if the menu is close to right edge of the window
        if(pageX+mwidth > screenWidth){
        menu.css({left:pageX-mwidth});
        }
        //if the menu is close to bottom edge of the window
        if(pageY+mheight > screenHeight+scrTop){
        menu.css({top:pageY-mheight});
        }
        //finally show the menu
        menu.show();
 }); 
 $("html").on("click", function(){
 $(".menu").hide();
 });
 });

`

Antwoord 14

<script language="javascript" type="text/javascript">
  document.oncontextmenu = RightMouseDown; 
  document.onmousedown = mouseDown; 
  function mouseDown(e) {
    if (e.which==3) {//righClick
      alert("Right-click menu goes here");
    } 
  }
  function RightMouseDown() { 
    return false; 
  }
</script>
</body> 
</html>

Antwoord 15

Een eenvoudige manier om dit te doen, is door onContextMenu te gebruiken om een JavaScript-functie te retourneren:

<input type="button" value="Example" onContextMenu="return RightClickFunction();">
<script>
 function RightClickFunction() {
  // Enter your code here;
  return false;
 }
</script>

En door return false;in te voeren, annuleert u het contextmenu.

als je nog steeds het contextmenu wilt weergeven, kun je de regel return false;verwijderen.

Antwoord 16

Getest en werkt in Opera 12.17, Firefox 30, Internet Explorer 9 en Chrome 26.0.1410.64

document.oncontextmenu =function( evt ){
        alert("OK?");
        return false;
        }

Antwoord 17

<script>
function fun(){
document.getElementById('menu').style.display="block";
}
</script>
<div id="menu" style="display: none"> menu items</div>
<body oncontextmenu="fun();return false;">

Wat ik hier doe

1. Maak je eigen aangepaste div-menu en stel de positie in: absoluut en display:none voor het geval dat.
2. Voeg aan de pagina of het element waarop moet worden geklikt de gebeurtenis in het contextmenu toe.
3. Annuleer de standaard browseractie met false.

4. Gebruik js om uw eigen acties op te roepen.

Antwoord 18

Onthoud dat als u de Firefox-oplossing alleen wilt gebruiken, als u deze aan het hele document wilt toevoegen, u contextmenu="mymenu"moet toevoegen aan de <html>tag niet naar de bodytag.
Hier moet je op letten.

Antwoord 19

<html>
<head>
<style>
.rightclick {
    /* YOUR CONTEXTMENU'S CSS */
    visibility: hidden;
    background-color: white;
    border: 1px solid grey;
    width: 200px;
    height: 300px;
}
</style>
</head>
<body>
  <div class="rightclick" id="ya">
    <p onclick="alert('choc-a-late')">I like chocolate</p><br><p onclick="awe-so-me">I AM AWESOME</p>
  </div>
  <p>Right click to get sweet results!</p>
</body>
<script>
    document.onclick = noClick;
    document.oncontextmenu = rightClick;
    function rightClick(e) {
        e = e || window.event;
        e.preventDefault();
        document.getElementById("ya").style.visibility = "visible";
        console.log("Context Menu v1.3.0 by IamGuest opened.");
   }
function noClick() {
    document.getElementById("ya").style.visibility = "hidden";
    console.log("Context Menu v1.3.0 by IamGuest closed.");
}
</script>
<!-- Coded by IamGuest. Thank you for using this code! -->
</html>

Je kunt deze code aanpassen en aanpassen om een beter uitziend, efficiënter contextmenu te maken. Wat betreft het wijzigen van een bestaand contextmenu, ik weet niet zeker hoe ik dat moet doen… Bekijk dit vioolvoor een georganiseerd standpunt. Probeer ook op de items in mijn contextmenu te klikken. Ze zouden je een paar geweldige berichten moeten waarschuwen. Als ze niet werken, probeer dan iets meer… complexs.

Antwoord 20

Ik gebruik iets dat lijkt op het volgende jsfiddle

function onright(el, cb) {
    //disable right click
    document.body.oncontextmenu = 'return false';
    el.addEventListener('contextmenu', function (e) { e.preventDefault(); return false });
    el.addEventListener('mousedown', function (e) {
        e = e || window.event;
        if (~~(e.button) === 2) {
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }
            return false;
        }
    });
    // then bind Your cb
    el.addEventListener('mousedown', function (e) {
        e = e || window.event;
        ~~(e.button) === 2 && cb.call(el, e);
    });
}

als u zich op oudere IE-browsers richt, moet u dit sowieso invullen met de ‘ attachEvent; geval