Как запретить контекстное меню (правую кнопку мыши) на изображениях. 4 способа.

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

Тем не менее, причины для запрета контекстного меню могут быть другими, и мы всё равно рассмотрим несколько способов.

Способ 1. При помощи JavaScript

В данном случае всё, что нам потребуется, это вставить следующий код в ваш исполняемый js-файл или между тегами <script> и </script> прямо в тело документа.

Имейте ввиду, что если вы вставите код в конец HTML-документа, то запрет на контекстное меню сработает не сразу, а только по мере подгрузки страницы. Это будет хорошо ощутимо с медленным интернет-соединением.

function disablecontext(e) {
	var clickedEl = (e==null) ? event.srcElement.tagName : e.target.tagName;
	if (clickedEl == "IMG") {
		alert(errorMsg);
		return false;
	}
}
var errorMsg = "Вы не можете сохранять изображения с этого сайта.";
document.oncontextmenu = disablecontext;

Способ 2. Задействуем jQuery, тем самым сократив код

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

$('img').bind('contextmenu', function(e) {
    return false;
});

Способ 3. При помощи CSS

Интересный способ. Отлично подойдёт для элементов интерфейса и не сгодится для изображений в контенте сайта (плохо для SEO — такие изображения не увидят поисковики).
Итак, предположим, у нас есть какое-то изображение:

<img src="http://truemisha.com/image.png" width="32" height="55" />

Теперь, вместо этой строчки вставляем блок <div></div>, добавляем ему атрибут ID (например my_image) и приписываем следующие стили:

div#my_image{
	width: 32px;
	height: 55px;
	background: url('http://truemisha.com/image.png') 0 0 no-repeat;
}

В результате, хоть контекстное меню и не исчезнет полностью, из него пропадут такие пункты, как «Сохранить картинку как…» и «Копировать URL картинки». Пример для Google Chrome:

контекстное меню без возможности сохранения картинки

Запрет контекстного меню на конкретных изображениях при помощи HTML-атрибута

Данный способ актуален при использовании для определённых изображений.

<img oncontextmenu='alert("Вы не можете сохранить это изображение.");return false;' border="0" src="http://truemisha.com/image.png" />

Миша

В последние годы я долго не знал, что мне делать с сайтом misha.blog, ведь он практически не приносит никакого профита, но недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Комментарии — 5

  • Aibek 28 января 2014 #

    document.ondragstart = test;
    document.onselectstart = test;
    document.oncontextmenu = test;
    function test() {return false}

    по лучше

    • Kai 4 апреля 2020 #

      Ага.. а с шифтом то пашет все отлично!
      😛

  • Жопа императора 8 октября 2014 #

    просто нереально помог скрипт).. то что искал.. хотел потыкать по рекламе Вам, да смотрю некуда..

    • Миша 8 октября 2014 #

      Рад, что смог помочь 🙂 буду рад, если поделитесь постом в соц сетях)

    • Игорь Фёдоров 23 июля 2015 #

      Интересное у вас имя! 😀

Оставить комментарий

Если вы хотите добавить код, не забудьте обернуть его в <pre lang="php"></pre>, если же код – меньше одной строчки, то можно и в <code></code>.