JQuery / JS verhindert Rechtsklick-Menü in Browsern

Habe ich mein div mit einem rechts-Klick popup-Menü:

//Attatch right click event to folder for extra options
$('#fBox' + folderID).mousedown(function(event) {
    if (event.which == 3) {

        //Set ID
        currRClickFolder = folderID;

        //Calculate position to show popup menu
        var height = $('#folderRClickMenu').height();
        var width = $('#folderRClickMenu').width();
        leftVal = event.pageX - (width / 2) + "px";
        topVal = event.pageY - (height) + "px";
        $('#folderRClickMenu').css({ left: leftVal, top: topVal }).show();

    }
});

Aber der browser für dieses element immer noch öffnet sich das Standard-Menü (kopieren/einfügen/Eigenschaften etc). Irgendeiner Weise zu deaktivieren? Ich habe versucht, false zurückgeben, aber nicht Glück.

InformationsquelleAutor der Frage Tom Gullen | 2011-02-07

95

Können Sie deaktivieren, klicken Sie rechts durch Anhängen oncontextmenu="return false;" zu Ihrem Körper tag.
```
<body oncontextmenu="return false;">
```
InformationsquelleAutor der Antwort Arseny
36

Können Sie deaktivieren Kontextmenü zu jedem element, das Sie wollen:
```
$('selector').contextmenu(function() {
    return false;
});
```
Deaktivieren Kontextmenü auf der Seite komplett (vielen Dank an Ismail), verwenden Sie die folgende:
```
$(document).contextmenu(function() {
    return false;
});
```
InformationsquelleAutor der Antwort Webars

Einem jQuery-Zeile:

$('[id^="fBox"]').on("contextmenu", function(evt) {evt.preventDefault();});

InformationsquelleAutor der Antwort KrisWebDev

Versuchen Sie dies:

$('#fBox' + folderID).bind("contextmenu", function () {
                alert("Right click not allowed");
                return false;
            });

InformationsquelleAutor der Antwort Sang Suantak

Versuchen...

$('[id^="fBox"]').mousedown(function(event) {
    if (event.which == 3) {
        event.preventDefault();
        //Set ID
        currRClickFolder = $(this).attr('id').replace('fBox','');

        //Calculate position to show popup menu
        var height = $('#folderRClickMenu').height();
        var width = $('#folderRClickMenu').width();
        leftVal = event.pageX - (width / 2) + "px";
        topVal = event.pageY - (height) + "px";
        $('#folderRClickMenu').css({ left: leftVal, top: topVal }).show();

    }
});

wenn Sie irgendwelche dynamische Erstellung dieser Boxen dann...

$('[id^="fBox"]').live('mousedown',function(event) {
    ...
});

InformationsquelleAutor der Antwort Ian Wood

2

Dies ist ein Standard-Verhalten von Browser zu deaktivieren-die Alternative-klicken Sie auf Einstellungen überschreiben. Jeder Nutzer muss dieses Verhalten ermöglichen in aktuellen Browsern. Ich zum Beispiel, erlauben nicht, dass dieses Verhalten, wie ich es immer wollen mein Standard-pop-up-Menü.

InformationsquelleAutor der Antwort Olivier Grégoire

Verwendung von jQuery:

$('[id^="fBox"]').bind("contextmenu",function(e){
    return false;
});

Oder deaktivieren der Kontext-Menü über die ganze Seite:

$(document).bind("contextmenu",function(e){
    return false;
});

InformationsquelleAutor der Antwort kachar

2

Stimme ich mit @aruseni, Sperrung oncontextmenu auf der Körper-Ebene vermeiden Sie der standard-Kontext-Menü auf der rechten Seite klicken Sie für jedes element auf der Seite.

Aber was, wenn Sie möchten, um eine feinere Steuerung?

Ich hatte ein ähnliches Problem und ich dachte, ich habe eine gute Lösung gefunden: warum nicht anbringen direkt an Ihre context-Menü-code, um die contextmenu Ereignis, das jeweilige element(s) Sie wollen, zu behandeln? So etwas wie dieses:
```
//Attatch right click event to folder for extra options
$('#fBox' + folderID).on("contextmenu", function(event) {
  //<-- here you handle your custom context menu
  //Set ID
  currRClickFolder = folderID;

  //Calculate position to show popup menu
  var height = $('#folderRClickMenu').height();
  var width = $('#folderRClickMenu').width();
  leftVal = event.pageX - (width / 2) + "px";
  topVal = event.pageY - (height) + "px";
  $('#folderRClickMenu').css({ left: leftVal, top: topVal }).show();

  event.stopImmediatePropagation();
  return false; //<-- here you avoid the default context menu
});
```
Damit vermeiden Sie, Behandlung, zwei verschiedene Ereignisse zu erfassen, die Kontext-Menü und passen Sie es 🙂

Natürlich davon ausgegangen, dass Sie nichts dagegen haben, dass die standard-Kontext-Menü angezeigt, wenn jemand klickt auf die Elemente, die Sie nicht wählen. Sie könnte genauso gut zeigen verschiedene Kontextmenüs, je nachdem, wo der Benutzer mit der rechten Maustaste..

HTH

InformationsquelleAutor der Antwort Luke

//Attatch right click event to folder for extra options
$('#fBox' + folderID).mousedown(function(event) {
    if (event.which == 3) {
        event.preventDefault();
        //Set ID
        currRClickFolder = folderID;

        //Calculate position to show popup menu
        var height = $('#folderRClickMenu').height();
        var width = $('#folderRClickMenu').width();
        leftVal = event.pageX - (width / 2) + "px";
        topVal = event.pageY - (height) + "px";
        $('#folderRClickMenu').css({ left: leftVal, top: topVal }).show();

    }
});

InformationsquelleAutor der Antwort Shrinath

1

Für mich
```
$('body').on('contextmenu',function(){return false;});
```
jQuery macht den job 🙂

InformationsquelleAutor der Antwort Mirosław Karczmarczyk

Hier ist ein Weg, den ich zuletzt verwendet (mit ein wenig jQuery auch), wenn ich lief in ein problem mit ihm. Da das mousedown-Ereignis Auftritt, bevor das contextmenu, dieser trick scheint zu bekommen, was ist das anbringen einer Körper-Ebene oncontextmenu-handler false zurückgeben, vorübergehend in das mousedown-Ereignis, führen Sie Ihre gewünschte Aktion aus, dann ist ein wichtiger Teil, denken Sie daran, entfernen der hf hinterher.

Dies ist nur ein Teil von meinem code extrahiert, als Beispiel...

$(div)
    .mousedown(function (e) {
        if (!leftButtonPressed(e)) {
            disableContextMenu(true);
            showOptions({ x: e.clientX, y: e.clientY }, div); //do my own thing here
        }
    });

Wenn meine showoptions() rtn abgeschlossen ist, wird eine callback-Funktion ausgeführt wird, und es ruft die disable-rtn wieder, aber mit 'false':

disableContextMenu(false);

Hier mein disableContextMenu() rtn:

function disableContextMenu(boolDisable, fn) {
    if (boolDisable) {
        $(document).contextmenu(function (e) {
            if (fn !== undefined) {
                return fn(e);
            } else {
                return false;
            }
        });
    } else {
        $(document).prop("oncontextmenu", null).off("contextmenu");
    }
}

InformationsquelleAutor der Antwort Dan K

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.