Как отключить щелчок правой кнопкой мыши на моей веб-странице? - PullRequest
275 голосов
/ 10 апреля 2009

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

Если нет, то как использовать JavaScript для отключения правого клика?

Ответы [ 22 ]

456 голосов
/ 10 апреля 2009

Это можно сделать с помощью JavaScript, добавив прослушиватель событий для события contextmenu и вызвав метод preventDefault():

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

Как говорится: НЕ ДЕЛАЙТЕ ЭТОГО.

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

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

122 голосов
/ 10 апреля 2009

НЕ

Только не надо.

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

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

Не.

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

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

65 голосов
/ 10 августа 2012

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

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

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

Но если вы создаете игру, помните, что при нажатии правой кнопки мыши запускается событие contextmenu , но также запускаются обычные mousedown и mouseup события тоже. Поэтому вам нужно проверить свойство which события, чтобы увидеть, была ли кнопка мыши левой (которая === 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); 
    }
});

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

34 голосов
/ 07 июня 2013

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

<body oncontextmenu="return false;">

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

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

27 голосов
/ 27 января 2014

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

    $(function() {
        $(this).bind("contextmenu", function(e) {
            e.preventDefault();
        });
    }); 
20 голосов
/ 10 апреля 2009

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

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

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

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

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

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

18 голосов
/ 10 апреля 2009

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

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

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

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

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

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

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

15 голосов
/ 10 апреля 2009

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

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

14 голосов
/ 01 февраля 2014

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

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

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

9 голосов
/ 21 сентября 2012
<!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>

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