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

316

Могу ли я отключить щелчок правой кнопкой мыши на моей веб-странице без использования JavaScript? Я спрашиваю об этом, потому что большинство браузеров позволяют пользователю отключать JavaScript.

Если нет, как я могу использовать JavaScript, чтобы отключить щелчок правой кнопкой мыши?

javascript Виная Пандей
источник
130
Отключение правого клика - это не безопасность, это просто раздражает ваших пользователей. Любой браузер, который не позволяет отключить это, бесполезен, но сайты, которые делают это в первую очередь, ужасны.
Дэн Олсон
17
Если вы не хотите, чтобы ваш контент был взят, вы не должны публиковать его в Интернете. :) Современные браузеры могут даже игнорировать способность JavaScript отключать щелчок правой кнопкой мыши. Такие инструменты, как Firebug / Web Dev Toolbar делают защиту бесполезной.
epascarello
7
Вот небольшой пользовательский скрипт chrome / greesemonkey для повторного включения правого клика: dl.dropbox.com/u/464119/Programming/javascript/…
ripper234
31
Действительно @DanOlson ... что вы должны делать, если хотите кодировать свое собственное правое меню? Такие, как найдено в cPanel.
Кодесмит
30
@epascarello В некоторых случаях отключение правой кнопки мыши необходимо, как, например, на терминалах киоска, потому что пользователь там на самом деле не нуждается, и если его оставить там, это может раздражать пользователей
Aram

Ответы:

525

Вы можете сделать это с помощью JavaScript, добавив обработчик событий для события contextmenu и вызвав preventDefault()метод:

document.addEventListener('contextmenu', event => event.preventDefault());

Это, как говорится: не делай этого.

Зачем? Потому что он не достигает ничего, кроме раздражающих пользователей. Также во многих браузерах есть опция безопасности, которая в любом случае запрещает отключение контекстного меню.

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

Клетус
источник
86
Использование oncontextmenu="return false"на чем-то другом, кроме тела, может иметь смысл, например на холсте.
AdrienBrault
62
Мы разворачиваемся на киосках и выбрали этот способ, чтобы запретить пользователям обновлять страницу.
Тодд Хорст
22
@ToddHorst в этом случае я бы использовал специальную версию "Киоска" браузера без какого-либо пользовательского интерфейса, который обычно также доступен без каких-либо контекстных меню :)
mihi
17
Сенсорные системы иногда отображают определенные сенсорные события, такие как длительное нажатие, правой кнопкой мыши (и, таким образом, открывают контекстное меню). Однако такое поведение может быть нежелательным, и единственным значимым способом его предотвращения, по-видимому, является отключение контекстного меню.
ИЛИ Mapper
58
Старый поток, но в случае, если кто-то читает его, не все веб-разработчики создают свои сайты для себя, иногда клиент приходит к вам и настаивает на отключении правого клика, когда вы пытаетесь убедить его, что он просто ищет другого разработчика, который сделает это без колебаний
Danny22
122

не надо

Просто не надо.

Независимо от того, что вы делаете, вы не можете помешать пользователям иметь полный доступ ко всем битам данных на вашем сайте. Любой код Javascript, который вы кодируете, можно сделать спорным, просто отключив Javascript в браузере (или используя плагин, такой как NoScript). Кроме того, нет никакого способа отключить возможность какого-либо пользователя просто «просматривать источник» или «просматривать информацию о странице» (или использовать wget) для вашего сайта.

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

Не.

Обновление: Кажется , эта маленькая тема оказалась весьма спорное с течением времени. Тем не менее, я поддерживаю этот ответ на этот вопрос. Иногда правильный ответ - совет, а не буквальный ответ.

Люди, которые сталкиваются с этим вопросом в надежде выяснить, как создавать пользовательские контекстные меню, должны искать в другом месте, например, такие вопросы:

Клин
источник
230
Вау, я не могу поверить, что это был принятый ответ. Существует множество допустимых применений для удаления щелчка правой кнопкой мыши в веб-приложении при определенных условиях.
GAgnew
84
Реальный ответ должен быть:<body oncontextmenu="return false;">
Себастьян Гриньоли
18
@GAgnew: есть допустимые варианты использования для замены контекстного меню. Нет действительных пользователей, которые безоговорочно
отключали бы правые клики
80
Если пользователь хочет создать видеоигру в формате HTML5, отключение правой кнопки мыши может быть весьма полезным. Обычно это нежелательно, но просто сказать «НЕ» без надлежащего контекста не очень полезно.
Робсон Франса
51
-1 от меня тоже. Этот ответ не полезен. Есть много веских причин для отключения правого клика. Например, я создал веб-приложение, которое больницы используют на стойке регистрации, и пользователи не разбираются в технических вопросах. Несмотря на то, что приложение работает в их веб-браузере, они не понимают, почему все пункты меню появляются при щелчке правой кнопкой мыши. Мы получили тонны вопросов о помощи, которые задавали нам, какие варианты есть у людей, которые считали себя частью приложения. Отключение их имело смысл в этом случае, и делает это во многих других веб-приложениях.
Николай
66

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

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

document.addEventListener("contextmenu", function(e){
    e.preventDefault();
}, false);

Но если вы создаете игру, то помните, что при нажатии правой кнопки мыши запускается событие contextmenu, но также и обычные события mousedown и mouseup . Таким образом, вам нужно проверить, какое свойство события, чтобы увидеть, была ли это левая (которая === 1), средняя (которая === 2) или правая (которая === 3) кнопка мыши, которая запускает событие.

Вот пример в jQuery - обратите внимание, что нажатие правой кнопки мыши вызовет три события: событие mousedown, событие contextmenu и событие mouseup.

// With jQuery
$(document).on({
    "contextmenu": function(e) {
        console.log("ctx menu button:", e.which); 

        // Stop the context menu
        e.preventDefault();
    },
    "mousedown": function(e) { 
        console.log("normal mouse down:", e.which); 
    },
    "mouseup": function(e) { 
        console.log("normal mouse up:", e.which); 
    }
});

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

Мистер спикер
источник
Если я включен dom.event.contextmenu.enabledв Firefox, будут ли mousedownи mouseupсобытия по- прежнему срабатывает , даже если contextmenuнет?
Роберт
43

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

<body oncontextmenu="return false;">

Это заблокирует весь доступ к контекстному меню (не только с правой кнопки мыши, но и с клавиатуры).

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

by0
источник
Да, но бывают случаи, когда я хочу кратко поделиться изображением с тем, кому, как мне известно, не хватает базовых знаний браузера. Отключение правого щелчка не на 100% надежно, но если я отправлю изображение всего на несколько минут, чтобы позволить этому человеку взглянуть, это довольно безопасно.
WillO
Сенсорные системы иногда отображают определенные сенсорные события, такие как длительное нажатие, правой кнопкой мыши (и, таким образом, открывают контекстное меню). Однако такое поведение может быть нежелательным, и единственным значимым способом его предотвращения, по-видимому, является отключение контекстного меню.
ИЛИ Mapper
@WillO: у меня есть похожий вариант использования, который мне нужен, но, к вашему сведению, пользователи всегда будут прибегать к скриншотам .
Хасан Бэйг
28

Если вы являетесь поклонником jquery, используйте это

    $(function() {
        $(this).bind("contextmenu", function(e) {
            e.preventDefault();
        });
    });
Вишну Викраман
источник
4
Это использует jQuery без причины. Это точно так же, как единственное утверждение JavaScript, найденное в ответе г-на Спикера, которое было опубликовано за полтора года до этого. Кстати, этот ответ также включает в себя решение jQuery, которое опять же вам не нужно. Кто-нибудь, кто проголосовал против этого ответа, даже знает, что это делает? Почему это приводит к тому, что событие готовности документа перестает мешать появлению контекстного меню? Почему это используется thisвнутри готового события? Почему вы используете bindвместо on? Тьфу ...
Рудей
20

Во-первых, вы не можете достичь этого, не используя возможности на стороне клиента. Это где javascript работает.

Во-вторых, если вы пытаетесь контролировать то, что конечный пользователь может потреблять с вашего сайта, вам нужно переосмыслить способ отображения этой информации. Изображение имеет общедоступный URL-адрес, который можно получить через HTTP без использования браузера.

Аутентификация может контролировать, кто имеет доступ к каким ресурсам.

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

В конце концов, управление ресурсами - это действительно управление пользователями / гостями.

Первое правило Интернета, если вы не хотите, чтобы оно было принято, не делайте его публичным!

Второе правило Интернета, если вы не хотите, чтобы его взяли, не размещайте его в Интернете!

Wayne
источник
20

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

Предполагая, что вы пытаетесь защитить изображения, альтернативные методы -

Используя флэш-плеер, пользователи не могут загрузить их как таковые, но они могут легко сделать снимок экрана.

Если вы хотите быть более неуклюжим, сделайте изображение фоном div, содержащим прозрачное изображение, а ля

<div style="background-image: url(YourImage.jpg);">
   <img src="transparent.gif"/>
</div>

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

benophobia
источник
2
Вы можете даже загрузить изображение как base64, чтобы еще больше запутать код.
Мигель Бартельсман
16

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

Просто нет хорошего решения, и нет периода решения без Javascript.

Энтони
источник
1
И даже тогда это раздражает пользователей, не говоря уже о том, что их легко обойти.
Манос Дилаверакис
1
Я только когда-либо видел страницы, которые имеют модальное всплывающее окно с надписью «щелчок правой кнопкой мыши отключен», который затем показывает меню, вызываемое правой кнопкой мыши, когда вы его закрываете. Они также отображают сообщение при прокрутке с помощью трекпада, что очень раздражает.
Пит Киркхам
1
Да, это особенно раздражает, поскольку обычно это препятствует тому, чтобы люди «крали» изображения, которые уже находятся на их жестком диске, но все, что он делает, это препятствует тому, чтобы я использовал контекстный поиск: addons.mozilla.org/en-US/firefox/addon/240 , Эти ублюдки ...
Кельвин
2
Мне нравится, что почти каждый ответ на это "Конечно, используйте JavaScript!"
Чарльз Вуд
14

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

document.addEventListener("contextmenu", function(e){
    if (e.target.nodeName === "IMG") {
        e.preventDefault();
    }
}, false);

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

Андрей
источник
На мой взгляд, это лучший способ - как веб-пользователь, я нахожу полезные функции правой кнопки мыши время от времени, но как простое, простое (и да, легко побиваемое) решение работает без раздражающих действий.
Бен
9 
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<script type='text/javascript'>//<![CDATA[ 
$(function(){
$('img').bind('contextmenu', function(e){
return false;
}); 
});//]]>  
</script>
</head>
<body>
    <img src="http://www.winergyinc.com/wp-content/uploads/2010/12/ajax.jpg"/>
</body>

aravind3
источник
dom.event.contextmenu.enabled
Роберт
2
@ aravind3 Я использовал твой пример, и это доставляет удовольствие! Мои изображения по-прежнему кликабельны и работают так, как они должны, но их невозможно загрузить. Причина, по которой я хотел отключить щелчок правой кнопкой мыши, заключается в том, что посетители, которым нужно только изображение, а затем сразу же уйти, влияют на показатель отказов. По крайней мере, таким образом, мой показатель отказов не будет таким плохим, так как это может занять 1 или 2 минуты, чтобы понять это :) Ура aravind3 !!!!
coolydude
6

Сделайте это, как показано ниже (это работает и в Firefox): 

$(document).on("contextmenu",function(e){

     if( e.button == 2 ) {
         e.preventDefault();
          callYourownFucntionOrCodeHere();
     }
return true;
});
nntona
источник
5

Поместите этот код в ваш <head>тег на вашей странице.

<script type="text/javascript"> 
function disableselect(e){  
return false  
}  

function reEnable(){  
return true  
}  

//if IE4+  
document.onselectstart=new Function ("return false")  
document.oncontextmenu=new Function ("return false")  
//if NS6  
if (window.sidebar){  
document.onmousedown=disableselect  
document.onclick=reEnable  
}
</script>

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

теджас
источник
Это не работает в Firefox, оно отключает выбор ввода для ввода форм :(
ALWAN
5

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

jQuery(document).ready(function(){
  jQuery(function() {
        jQuery(this).bind("contextmenu", function(event) {
            event.preventDefault();
            alert('Right click disable in this site!!')
        });
    });
});
<html>
  <head>
    <title>Right click disable in web page</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    You write your own code
  </body>
</html>
Развернуть фрагмент

Арвинда Кумар
источник
4

Конечно, как и во всех других комментариях здесь, это просто не работает.

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

Cruachan
источник
4 
    <script>
        window.oncontextmenu = function () {
            console.log("Right Click Disabled");
            return false;
        }
    </script>
Anbu
источник
3

Попробуй это

<script language=JavaScript>
//Disable right mouse click Script

var message="Function Disabled!";

function clickIE4(){
if (event.button==2){
alert(message);
return false;
 }
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

</script>
Dipesh
источник
3

Отключить щелчок правой кнопкой мыши на вашей веб-странице очень просто. Есть всего несколько строк кода JavaScript, которые будут выполнять эту работу. Ниже приведен код JavaScript:

$("html").on("contextmenu",function(e){
   return false;
});

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

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

Фарук Ахамед Моллик
источник
2 
 $(document).ready(function () {
            document.oncontextmenu = document.body.oncontextmenu = function () { return false; }
        });
Сохейл Биджавар
источник
2

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

Могу ли я отключить щелчок правой кнопкой мыши

Могу ли я отключить щелчок правой кнопкой мыши на моей веб-странице без использования Javascript?

Да, с помощью JavaScript вы можете отключить любое событие, которое происходит, и вы можете сделать это в основном только с помощью javaScript. Как, все что вам нужно это:

  1. Работающее оборудование

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

Теперь предположим, что вы хотите заблокировать клавишу ввода, нажмите здесь код: 

function prevententer () {
 if(event.keyCode == 13) {
  return false;
 }
}

Для правого клика используйте это: 

event.button == 2

на месте event.keyCode. И вы заблокируете это.

Я хочу спросить об этом, потому что большинство браузеров позволяют пользователям отключать его с помощью Javascript.

Вы правы, браузеры позволяют вам использовать, JavaScriptа javascript делает всю работу за вас. Вам не нужно ничего настраивать, просто нужен атрибут script в голове.

Почему не стоит его отключать?

Основным и быстрым ответом на это будет то, что пользователям это не понравится . Всем нужна свобода, никто, я имею в виду, никто не хочет быть заблокированным или отключенным, несколько минут назад я был на сайте, который заблокировал меня от щелчка правой кнопкой мыши, и я почувствовал почему? Вам нужно защитить свой исходный код? Тогда здесь ctrl+shift+Jя открылConsole и теперь я могу пойти вHTML-code вкладку. Давай, останови меня. Это не добавит никакой слой безопасности в ваше приложение.

В правом клике есть множество пользовательских меню, таких как «Копировать», «Вставить», «Поиск в Google» для «текста» (в Chrome) и многое другое. Таким образом, пользователь хотел бы получить простоту доступа вместо того, чтобы запоминать множество сочетаний клавиш. Любой человек может скопировать контекст, сохранить изображение или сделать все, что он захочет.

Браузеры используют навигацию с помощью мыши: некоторые браузеры, такие как Opera используют навигацию с помощью мыши, поэтому, если вы отключите ее, пользователь определенно будет ненавидеть ваш пользовательский интерфейс и сценарии.

Так что это было основным, я собирался написать еще немного о сохранении исходного кода, хе-хе, но пусть это будет ответом на ваш вопрос.

Ссылка на коды клавиш:

Код ключа и кнопки мыши:

http://www.w3schools.com/jsref/event_button.asp

https://developer.mozilla.org/en-US/docs/Web/API/event.button (также будет оценено пользователями).

Почему бы не отключить правый клик:

http://www.sitepoint.com/dont-disable-right-click/

Афзаал Ахмад Зеешан
источник
1

Javascript:

document.getElementsByTagName("html")[0].setAttribute("oncontextmenu", "return false");
زياد
источник
0

Важное примечание: это зависит от браузера и ОС, чтобы разрешить такое предотвращение или нет!

Должны ли вы сделать это? Нет . Потому что это не помешает пользователю, а просто раздражает его.

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

Chrome (v65) в Ubuntu 16.04 = Вы МОЖЕТЕ отключить щелчок правой кнопкой мыши.

Chrome (v65) в Mac OS 10.11 = Вы НЕ МОЖЕТЕ отключить щелчок правой кнопкой мыши.

Chrome (v65) в Windows 7 = ВЫ НЕ МОЖЕТЕ отключить щелчок правой кнопкой мыши.

Firefox (v41) в Mac OS 10.11 = Вы МОЖЕТЕ отключить щелчок правой кнопкой мыши.

Firefox (v43) в Windows 7 = Вы МОЖЕТЕ отключить щелчок правой кнопкой мыши.

// Vanilla JS way
document.addEventListener('contextmenu', function(e){
    e.preventDefault();
});

// jQuery way
$(document).bind('contextmenu', function(e) {
    e.preventDefault();
});
evilReiko
источник
0

Несколько вещей для рассмотрения:

Плагины браузера, такие как «включить правый клик» в магазине Chrome, существуют по определенной причине, и вы не сможете их обойти. В буквальном смысле НИЧЕГО вы не можете сделать, чтобы люди не загружали ваш контент, поскольку им буквально нужно его скачать, чтобы в любом случае увидеть его в своем браузере; Люди стараются, но всегда рядом.

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

Кроме того, неспособность щелкнуть правой кнопкой мыши является проблемой доступности и во многих случаях равносильна незаконной дискриминации в отношении слепых, инвалидов или пожилых людей. Проверьте свои местные законы, но в США он активно противоречит закону в форме Федерального ADA, поскольку слепые или пожилые люди, которые могут иметь проблемы со зрением, являются юридически защищенным классом.

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

honestduane
источник
0

Попробуйте этот код для отключения опции проверки элемента

    jQuery(document).ready(function() {
    function disableSelection(e) {
        if (typeof e.onselectstart != "undefined") e.onselectstart = function() {
            return false
        };
        else if (typeof e.style.MozUserSelect != "undefined") e.style.MozUserSelect = "none";
        else e.onmousedown = function() {
            return false
        };
        e.style.cursor = "default"
    }
    window.onload = function() {
        disableSelection(document.body)
    };

    window.addEventListener("keydown", function(e) {
        if (e.ctrlKey && (e.which == 65 || e.which == 66 || e.which == 67 || e.which == 70 || e.which == 73 || e.which == 80 || e.which == 83 || e.which == 85 || e.which == 86)) {
            e.preventDefault()
        }
    });
    document.keypress = function(e) {
        if (e.ctrlKey && (e.which == 65 || e.which == 66 || e.which == 70 || e.which == 67 || e.which == 73 || e.which == 80 || e.which == 83 || e.which == 85 || e.which == 86)) {}
        return false
    };

    document.onkeydown = function(e) {
        e = e || window.event;
        if (e.keyCode == 123 || e.keyCode == 18) {
            return false
        }
    };

    document.oncontextmenu = function(e) {
        var t = e || window.event;
        var n = t.target || t.srcElement;
        if (n.nodeName != "A") return false
    };
    document.ondragstart = function() {
        return false
    };
});
Agan116
источник
1
Спасибо за этот фрагмент кода, который может предоставить некоторую ограниченную краткосрочную помощь. Правильное объяснение значительно улучшило бы его долгосрочную ценность, показав, почему это хорошее решение проблемы, и сделало бы его более полезным для будущих читателей с другими, похожими вопросами. Пожалуйста, измените свой ответ, чтобы добавить некоторые объяснения, в том числе предположения, которые вы сделали.
Тоби Спейт
Это может быть чрезвычайно легко переопределить в Chrome: нажмите на 3 точки рядом с изображением вашего профиля> Дополнительные инструменты> Инструменты разработчика
sportzpikachu
-1

Используйте эту функцию, чтобы отключить щелчок правой кнопкой мыши. Вы можете отключить щелчок левой кнопкой мыши и коснуться также checking 1 and 0соответствующей

document.onmousedown = rightclickD;
            function rightclickD(e) 
            { 
                e = e||event;
                console.log(e);
                if (e.button == 2) {
                //alert('Right click disabled!!!'); 
                 return false; }
            }
Нарушитель закона
источник
Использование Javascript для того, чтобы делать то, что уже делает HTML, является плохой инженерной разработкой и расточительным
честный день