Html запрет контекстного меню

How to Disable Right Click Context Menu in Javascript

The browser fires the contextmenu event when you right-click on a page. The context menu usually has a list of actions like «View Page Source» and «Back». We can prevent this menu from appearing on right-click by latching onto the contextmenu event and using event.preventDefault() . If we add this event listener to the window object then we can prevent right-clicking on the whole page.

1 . window.addEventListener("contextmenu", e => e.preventDefault());

Disable browser right-click for specific element

We can prevent right-clicking on any element by attaching the event listener to that specific element and calling event.preventDefault() again.

1 . const noRightClick = document.getElementId("myElement"); 
2 . 
3 . noRightClick.addEventListener("contextmenu", e => e.preventDefault());

Disable context menu using oncontextmenu on an element

We can also disable the context menu by returning false on the oncontextmenu attribute on the body element.

1 . body oncontextmenu="return false;"> 
2 . . 
3 . body>

1 . canvas oncontextmenu="return false;">canvas>

Источник

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

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

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

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

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

Имейте ввиду, что если вы вставите код в конец 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" />

Теперь, вместо этой строчки вставляем блок , добавляем ему атрибут 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" />

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Источник

Disable Right-Click (Context Menu) with JavaScript

• by Louis Lazaris
• November 13, 2019

There are some instances where you might want to disable right-click on a web page. For example, if you want to prevent easy downloading of video or images. Or when you want to replace the default browser right-click menu with a custom right-click menu.

This is easy to do using JavaScript:

window.addEventListener('contextmenu', function (e) < // do something here. e.preventDefault(); >, false);
Code language: JavaScript (javascript)

In this instance, the only thing the code is doing is preventing the right-click menu from appearing. It listens for the contextmenu event, then the default functionality for this event (the appearing of the context menu) is disabled using the preventDefault() method. Where the code includes a comment that says “do something here…” you could trigger a function that builds or inserts a custom right-click menu.

The demo below displays a message on the page each time the user tries to enable the right-click menu.

Note: To the best of our knowledge, the information above and the snippet are accurate and up to date. However, in case you notice something wrong, please report snippet or leave a comment below.

Louis Lazaris is a writer, speaker, author, and front-end web developer who’s been involved in the web development industry in various forms since 2000. He blogs about code on his primary website and curates a series of newsletters for tech professionals and software developers.

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

• 50+ Best Free WordPress Themes
• How to Make a WordPress Website: Ultimate Guide
• Best WordPress Hosting
• Best Cheap WordPress Hosting
• Managed WordPress Hosting Guide
• Top 5 eCommerce Hosting Solutions
• Best Web Hosting for Small Business
• Best eCommerce Platforms
• Best Email Marketing Tools
• Best SMTP Providers Compared
• Best Live Chat Software Solutions
• How to Build Your Own Website

Источник

Как отключить контекстное меню на сайте?

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

Отключаем контекстное меню с помощью JQuery:

    
Текст, который нельзя копировать!
    

Отключаем контекстное меню без JQuery:

  
Текст, который нельзя копировать!
    

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

VK FB TW Whatsapp Telegram Email

Источник

Как отключить выбор текста, копирование, вырезание, вставку и правый щелчок мыши на веб-странице

Иногда может быть очень полезно воспрепятствование выбору некоторых частей веб-страницы.

Так как неприятно, когда user-selection отключен, будет лучше применить ограничения не для всей всей веб-страницы. Вместо этого отключите выбор текста для тех частей или определенных артиклей, которые, вы думаете, могут быть украдены. Используйте в случаях, если это поможет усовершенствовать UX вашей веб-страницы.

Независимо от того, какая у вас причина для отключения user-selection, если вы пришли к этому, то находитесь в правильном месте, чтобы изучить все это с помощью CSS, Javascript и jQuery.

Как отключить выбор текста с помощью CSS

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

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

• Chrome, Opera (older versions), IOS Safari: -webkit-user-select
• Safari: -webkit-touch-callout
• Mozilla: -moz-user-select
• Internet Explorer, Edge: -ms-user-select
• KHTML browsers (Konqueror): -khtml-user-select

Chrome (начиная с 54.0 версии) и Opera (начиная с 41.0 версии) поддерживают user-select без префикса -webkit-.

Пример

html> html> head> title>Заголовок документа title> style> .unselectable < -webkit-user-select: none; -webkit-touch-callout: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #cc0000; > style> head> body> p>Это выбираемый текст. Выберите текст. p> div class="unselectable">Это невыбираемый текст. Выбираемость текста отключена. div> body> html>

Если вам необходимо отключить выбираемость текста для всей страницы, примените user-select к элементу .

Как отключить выбираемость текста с помощью JavaScript

Пример

html> html> head> title>Заголовок документа title> head> body onmousedown="return false" onselectstart="return false"> h2>Unselectable text h2> p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. p> body> html>

Как отключить копирование, вырезание и вставку с помощью JavaScript/jQuery

Можно разрешить выбор текста, но запретить функции копирования и вырезания с помощью event атрибутов oncopy , oncut и onpaste . При помощи добавления этих атрибутов в тег текстового поля можно отключить функции вырезания, копирования и вставки. Пользователь имеет возможность ввести в поле вручную, когда установлены эти атрибуты.

Пример

html> html> head> title>Заголовок документа title> head> body> h2>Копирование, вырезание и вставка отключены h2> input type="text" onselectstart="return false" onpaste="return false;" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off/>br> body> html>

Можно иметь такой же эффект с помощью jQuery функции bind(), указывающий события cut и copy, которые срабатывают, когда пользователь вырезает или копирует текст.

Пример

html> html> head> title>Заголовок документа title> head> body> h2>Копирование и вырезание отключены h2> p>Невозможно скопировать или вырезать этот текст. p> script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> script> script type="text/javascript"> $(document).ready(function ( ) < $('body').bind('cut copy', function (e) < e.preventDefault(); >); >); script> body> html>

Как отключить правый щелчок мыши с помощью JavaScript/jQuery

Для того, чтобы отключить правый щелчок на странице, нужно добавить событие oncontextmenu и «return false» в обработчике событий. Таким образом, вы заблокируете доступ с помощью правого щелчка мыши к контекстному меню.

Пример

html> html> head> title>Заголовок документа title> head> body> h2>Копирование и вырезание отключены h2> p>Невозможно скопировать или вырезать этот текст. p> script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> script> script type="text/javascript"> $(document).ready(function ( ) < $('body').bind('cut copy', function (e) < e.preventDefault(); >); >); script> body> html>

Используйте jQuery функцию bind() для отключения правого щелчка мыши. Этот метод отключает правый щелчок (контекстное меню) в текстовом поле, а также предупреждает пользователю с помощью всплывающего сообщения.

Пример

html> html> head> title>Заголовок документа title> head> body> h2>Правый щелчок отключен h2> p>Для этой страницы правый щелчок отключен. p> script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> script> script type="text/javascript"> $(document).ready(function ( ) < $("body").on("contextmenu",function(e)< return false; >); >); script> body> html>

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

Источник