Запрет вызова контекстного меню браузера при помощи jQuery

May 12th, 2011 | Categories: Development | Tags: , ,

Допустим у нас есть изображение при правом клике мыши на которое вы не хотите чтобы отображалось контекстное меню браузера, или же вы хотите отобразить свое контекстное меню для какого-то элемента на странице…

Для отлова события при клике на элемент правой кнопкой мыши есть параметр “oncontextmenu”:

1
<img src="..." oncontextmenu="return false;"/>

Код “return false;”, который выполняется при наступлении этого события в примере выше, приводит к тому что контекстное меню не показывается. Тут так же можно разместить вызов любого вашего метода для отображения вашего контекстного меню…

Но что если возможности добраться напрямую к html-коду того или иного элемента у вас нет? Например в одном из наших проектов нужно было запретить контекстное меню при клике правой кнопкой на всплывающем просмотрщике изображений Fancybox. Конечно же ковырять и изменять подключаемую библиотеку не хотелось и было найдено очень простое и в то же время действенное решение: назначение обработчика события “oncontextmenu” при наступлении события “mousedown”…

1
2
3
4
5
6
7
$('#fancybox-wrap').delegate('#fancybox-outer', 'mousedown', function(e) {
    if (e.which == 3) {
        $(this)[0].oncontextmenu = function() {
            return false;
        }
    }
});

e.which в данном случае содержит код кнопки мыши которая была нажата: 1 – левая, 2 – средняя, 3 – правая. jQuery в данном случае унифицирует коды именно так, потому что в разных браузерах они немного отличаются друг от друга. Например в IE коды нативные коды 1, 4, 2 соответственно.

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

Данный код проверен и работает в следующих браузерах которые оказались под рукой: Google Chrome 11, Internet Explorer 9, Firefox 4, Opera 11, Safari 5.

  1. Сергей
    May 23rd, 2011 at 09:24
    Quote | #1

    В Opera 11 не работает. Вы точно проверяли это в Опере?

    • May 23rd, 2011 at 12:33
      Quote | #2

      В Opera 11 работает – проверено, но в настройках должно быть включено “JavaScript Options -> Allow scripts to detect context menu events” конечно же.

Comments are closed.