javascript - una - Jquery/JS evita el menú contextual en los navegadores

evitar que vean mi codigo fuente

Question

Tengo mi div con un menú emergente con el botón derecho:

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

    }
});

Pero el navegador de este elemento sigue apareciendo en el menú predeterminado (copiar / pegar / propiedades, etc.). ¿Alguna forma de desactivar esto? He intentado devolver falso pero no suerte.

Answer 1

Esta es una forma que utilicé recientemente (usando un poco de jQuery también) cuando me encontré con un problema. Dado que el evento mousedown ocurre antes del menú contextual, este truco parece atraparlo, lo cual es asociar un nivel corporal en el controlador de menú contextual para devolver el falso temporalmente en el evento mousedown, realizar la acción deseada, y luego como una parte importante, recuerde quitar el manejador después .

Esto es solo parte de mi código extraído, como un ejemplo ...

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

Cuando termina mi showoptions () rtn, se ejecuta una función de devolución de llamada y vuelve a llamar a disable-rtn, pero con ''false'':

disableContextMenu(false);

Aquí está mi 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");
    }
}

Answer 2

Este es un comportamiento predeterminado de los navegadores ahora para deshabilitar la anulación de clic alternativo. Cada usuario tiene que permitir este comportamiento en los navegadores recientes. Por ejemplo, no permito este comportamiento ya que siempre quiero mi menú emergente predeterminado.

Answer 3

Estoy de acuerdo con @aruseni, bloqueando el menú contextual a nivel del cuerpo, evitará el menú contextual estándar con el clic derecho para cada elemento de la página.

Pero, ¿y si quieres tener un control más fino?

Tuve un problema similar y pensé que había encontrado una buena solución: ¿por qué no adjuntar directamente su código de menú contextual al evento contextmenu de los elementos específicos con los que desea tratar? Algo como esto:

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

Por lo tanto, evita manejar dos eventos diferentes solo para capturar el menú contextual y personalizarlo :)

Por supuesto, esto supone que no te importa tener el menú contextual estándar que se muestra cuando alguien hace clic en los elementos que no seleccionaste. También podría mostrar diferentes menús contextuales dependiendo de dónde los usuarios hacen clic derecho.

HTH

Answer 4

Para mi

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

jQuery hace el trabajo :)

Answer 5

Prueba esto:

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

Answer 6

Puede desactivar el clic derecho al agregar oncontextmenu = "return false;" a tu etiqueta corporal

<body oncontextmenu="return false;">

Answer 7

Puede deshabilitar el menú contextual en cualquier elemento que desee:

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

Para deshabilitar completamente el menú contextual en la página (gracias a Ismail), use lo siguiente:

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

Answer 8

Tratar...

$(''[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 tiene alguna creación dinámica de estos cuadros, entonces ...

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

Answer 9

Una línea jQuery:

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

Answer 10

Usando jQuery:

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

O deshabilita el menú contextual en toda la página:

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

Answer 11

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

    }
});