JQuery / JS запретить меню правой кнопкой мыши в браузерах

У меня есть div с правой кнопкой мыши контекстное меню:

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

    }
});

но браузер для этого элемента по-прежнему всплывает меню по умолчанию (копировать/вставить/свойства и т. д.). Есть способ отключить это? Я пытался вернуть false, но не повезло.

42
javascript jquery right-click

11 ответов

вы можете отключить щелчок правой кнопкой мыши, добавив oncontextmenu= "return false;" к тегу body.

<body oncontextmenu="return false;">
96

вы можете отключить контекстное меню на любом элементе, который вы хотите:

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

чтобы полностью отключить контекстное меню на странице (благодаря Ismail), используйте следующее:

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

одна строка jQuery:

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

попробуйте это:

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

попробовать...

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

    }
});

Если у вас есть какое-либо динамическое создание этих ящиков...

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

теперь это поведение браузеров по умолчанию, чтобы отключить переопределение альтернативного щелчка. Каждый пользователь должен разрешить такое поведение в последних браузерах. Например, я не разрешаю это поведение, поскольку мне всегда нужно всплывающее меню по умолчанию.

2

использование jQuery:

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

или отключить контекстное меню на всю страницу:

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

Я согласен с @aruseni, блокируя oncontextmenu на уровне тела, вы будете избегать стандартного контекстного меню правой кнопкой мыши для каждого элемента на странице.

но что, если вы хотите иметь более тонкий контроль?

у меня была аналогичная проблема, и я подумал, что нашел хорошее решение: почему бы не прикрепить непосредственно код контекстного меню к contextmenu событие конкретного элемента(ов), с которым вы хотите иметь дело? Что-то вроде этого:--3--> 

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

таким образом вы избегаете обработка двух разных событий только для захвата контекстного меню и его настройки:)

конечно, это предполагает, что вы не возражаете, чтобы стандартное контекстное меню отображалось, когда кто-то щелкает элементы, которые вы не выбрали. Вы также можете показать различные контекстные меню в зависимости от того, где пользователи щелкните правой кнопкой мыши..

HTH

2
// 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

для меня 

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

jQuery выполняет работу:)

1

вот способ, который я использовал недавно (используя немного jQuery тоже), когда я столкнулся с проблемой с ним. Поскольку событие mousedown происходит до contextmenu, этот трюк, похоже, ловит его, который прикрепляет обработчик уровня тела oncontextmenu, чтобы временно вернуть false в событии mousedown, выполните желаемое действие, а затем, как важная часть, не забудьте удалить обработчик позже.

Это просто часть моего кода, извлеченного, как образец...

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

когда мой showoptions () rtn заканчивается, запускается функция обратного вызова, и она снова вызывает disable-rtn, но с "false":

disableContextMenu(false);

вот мой 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