Запрет вызова контекстного меню браузера при помощи jQuery
Допустим у нас есть изображение при правом клике мыши на которое вы не хотите чтобы отображалось контекстное меню браузера, или же вы хотите отобразить свое контекстное меню для какого-то элемента на странице…
Для отлова события при клике на элемент правой кнопкой мыши есть параметр “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.
В Opera 11 не работает. Вы точно проверяли это в Опере?
В Opera 11 работает – проверено, но в настройках должно быть включено “JavaScript Options -> Allow scripts to detect context menu events” конечно же.