web-dev-qa-db-fra.com

Jquery/JS empêche le menu clic droit dans les navigateurs

J'ai mon div avec un menu contextuel clic droit:

// 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();

    }
});

Mais le navigateur pour cet élément affiche toujours le menu par défaut (copier/coller/propriétés, etc.). Un moyen de désactiver cela? J'ai essayé de retourner faux mais pas de chance.

javascriptjqueryright-click
47
Tom Gullen

Vous pouvez désactiver le clic droit en ajoutant oncontextmenu = "return false;" à votre balise body.

<body oncontextmenu="return false;">
102
Arseny

Vous pouvez désactiver le menu contextuel sur n'importe quel élément:

$('selector').contextmenu(function() {
    return false;
});

Pour désactiver complètement le menu contextuel de la page (grâce à Ismail), utilisez les éléments suivants:

$(document).contextmenu(function() {
    return false;
});
40
Webars

Une ligne jQuery:

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

Essaye ça:

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

Essayer...

$('[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();

    }
});

si vous avez une création dynamique de ces boîtes alors ...

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

Utilisation de jQuery:

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

Ou désactivez le menu contextuel sur toute la page:

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

Je suis d'accord avec @aruseni. En bloquant oncontextmenu au niveau du corps, vous éviterez le menu contextuel standard du clic droit pour chaque élément de la page.

Mais que faire si vous voulez avoir un contrôle plus fin? 

J'avais un problème similaire et je pensais avoir trouvé une bonne solution: pourquoi ne pas associer directement votre code de menu contextuel à l'événement contextmenu du ou des éléments spécifiques que vous souhaitez traiter? Quelque chose comme ça:

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

Ainsi, vous évitez de gérer deux événements différents uniquement pour capturer le menu contextuel et le personnaliser :)

Bien entendu, cela suppose que le menu contextuel standard ne vous dérange pas que quelqu'un clique sur les éléments que vous n'avez pas sélectionnés. Vous pouvez également afficher différents menus contextuels en fonction du clic droit des utilisateurs.

HTH

2
Luke

Il s’agit maintenant d’un comportement par défaut des navigateurs pour désactiver le remplacement par un autre clic. Chaque utilisateur doit autoriser ce comportement dans les navigateurs récents. Par exemple, je n'autorise pas ce comportement car je veux toujours mon menu contextuel par défaut.

2
Olivier Grégoire

Pour moi 

$('body').on('contextmenu',function(){return false;});

jQuery fait le travail :)

1
Mirosław Karczmarczyk
// 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();

    }
});
1
Shrinath

Voici un moyen que j'ai utilisé récemment (avec un peu de jQuery aussi) lorsque je rencontrais un problème avec. Étant donné que l'événement mousedown se produit avant le menu contextuel, cette astuce semble l'attraper, ce qui consiste à attacher un gestionnaire oncontextmenu au niveau du corps pour le rendre temporairement faux dans l'événement mousedown, effectuez l'action souhaitée, puis n'oubliez pas de supprimer le gestionnaire ultérieurement .

Ceci est juste une partie de mon code extrait, à titre d'exemple ...

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

Lorsque mon showoptions () rtn se termine, une fonction de rappel est exécutée et appelle de nouveau le disable-rtn, mais avec 'false':

disableContextMenu(false);

Voici mon 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");
    }
}
0
Dan K