HTML에서 오른쪽 클릭 컨텍스트 메뉴 비활성화

Neha Imran 2023년6월20일

HTML HTML Context Menu

오른쪽 클릭을 비활성화하는 가능한 이유
오른쪽 클릭을 비활성화하는 것이 좋지 않은 이유
HTML 이벤트 처리기를 사용하여 오른쪽 클릭 비활성화
JavaScript를 사용하여 오른쪽 클릭 비활성화
이미지 오른쪽 클릭 비활성화

이 문서는 브라우저의 오른쪽 클릭 상황에 맞는 메뉴에 집중합니다. 개발자가 상황에 맞는 메뉴를 비활성화해야 한다고 생각하는 이유와 비활성화해서는 안 되는 이유를 살펴보겠습니다.

나중에 웹 사이트에서 오른쪽 클릭을 비활성화하는 다양한 전략을 살펴보겠습니다.

오른쪽 클릭을 비활성화하는 가능한 이유

여기에서는 당사 웹 사이트에서 오른쪽 클릭을 비활성화하지 않아야 하는 이유를 설명합니다.

블로거 또는 개발자로서 열심히 노력하고 창의적으로 작업한 작업이 도난당하는 것을 원하지 않습니다. 디자인, 이미지 또는 텍스트를 만드는 데 상당한 시간과 노력을 투자한 경우 웹 사이트에서 마우스 오른쪽 버튼 클릭을 방지하여 보안을 유지하고 싶을 수 있습니다.

오른쪽 클릭을 비활성화하는 웹 사이트를 자주 접하게 됩니다. 이것은 훌륭한 아이디어처럼 보일 수 있지만 그렇지 않습니다.

왜? 이에 대해서는 나중에 논의하겠습니다. 먼저 오른쪽 클릭을 비활성화해야 한다고 생각하는 이유를 알아보겠습니다.

콘텐츠를 보호하려면

모든 웹사이트에는 서면 정보가 있습니다. 작가는 때때로 자신의 웹 사이트에 가장 가치 있고 실용적인 콘텐츠를 만드는 데 많은 시간을 할애합니다.

아무도 자신의 작업이 다른 정체성으로 다른 곳에서 출판되는 것을 원하지 않습니다. 따라서 다른 웹 사이트에서 콘텐츠가 복제되고 사용되는 것을 방지하기 위해 마우스 오른쪽 버튼 클릭을 비활성화합니다.

이미지를 보호하려면

대부분의 경우 웹사이트 소유자는 콘텐츠로 사용할 뛰어난 품질의 사진을 구매하는 데 상당한 투자를 합니다. 그들은 일반적으로 개인이 무료로 그것들을 얻고 그들의 웹사이트에서 그것들을 사용할 때 낭비된다고 느낍니다. 따라서 사진을 보호하기 위해 마우스 오른쪽 버튼 클릭을 비활성화합니다.

소스 코드를 보호하려면

개발자들은 독특하고 혁신적인 웹사이트를 만들기 위해 많은 노력을 합니다. 시각적으로 매력적이고 기능적인 웹 사이트를 위한 HTML, CSS 및 JavaScript 코드를 작성하려면 상당한 시간과 노력이 필요합니다.

일부 웹 디자이너는 다른 사람의 웹사이트 소스 코드를 훔쳐 약간 수정한 다음 그 결과를 자신의 것으로 게시합니다. 따라서 개발자는 웹사이트에서 페이지 소스 보기를 비활성화하는 것이 웹사이트 소스 코드를 보호하는 훌륭한 전략이라고 생각합니다.

사용자 요구 사항을 충족하려면

때로는 오른쪽 클릭을 비활성화하는 것이 웹 응용 프로그램의 요구 사항입니다. 응용 프로그램이 대상으로 하는 대상에 따라 다릅니다.

예를 들어, 병원 시스템은 기술 지식이 많지 않은 환자를 위해 만들어지고 원치 않는 옵션을 클릭하게 됩니다. 따라서 디자인을 단순하게 유지하기 위해 불필요한 클릭은 모두 비활성화로 설정됩니다.

오른쪽 클릭을 비활성화하는 것이 좋지 않은 이유

우리는 개발자가 자신의 웹사이트에서 오른쪽 클릭을 비활성화하기 위해 생각하는 요구 사항에 대해 논의했지만 이는 효율적인 접근 방식이 아니라고 말했습니다. 그 이유에 대해 논의해 봅시다.

사용자에게 성가신

오른쪽 클릭을 비활성화하면 웹사이트 사용자가 화를 낼 뿐입니다. 그것은 당신의 웹사이트를 더 복잡하고 덜 사용자 친화적으로 만듭니다.

오른쪽 클릭 메뉴는 사용자에게 많은 유용한 옵션을 제공합니다. Chrome 웹 브라우저는 사용자에게 번역 옵션을 제공하여 웹 사이트를 사용자가 선택한 언어로 번역합니다.

Chrome의 오른쪽 클릭 메뉴에 있는 또 다른 필수 기능은 장치 간에 링크를 공유하여 사용자가 PC에서 휴대폰으로 또는 그 반대로 링크를 직접 보낼 수 있도록 하는 것입니다.

보안에 영향 없음

오른쪽 클릭을 비활성화하는 것은 보안이 아닙니다. 페이지에서 항목을 더 쉽게 저장하는 것 외에는 아무런 효과가 없습니다.

브라우저에서 개발자 모드를 사용하거나 JavaScript를 비활성화하면 작동합니다. Ctrl+U 바로 가기 키를 통해 소스 코드에 액세스하고 Ctrl+Shift+<kbd를 사용하여 검사할 수 있습니다. >나.

개발자가 웹 사이트를 더 안전하게 만들기 위해 마우스 오른쪽 버튼 클릭을 비활성화하면 잘못된 방향으로 가고 있습니다. 오른쪽 클릭 메뉴는 JavaScript를 사용하여 비활성화되며 브라우저에서 JavaScript 기능을 쉽게 비활성화할 수 있습니다.

무의미하다

오른쪽 클릭을 비활성화하면 소스 코드나 사진이 보호될 것이라고 생각한다면 다시 생각해 보십시오. 귀하의 콘텐츠나 코드를 훔치기로 결정한 사람은 브라우저 컨텍스트 메뉴에 액세스할 수 있는지 여부에 관계없이 그렇게 할 것입니다.

앞서 논의한 바와 같이 이러한 컨텍스트 메뉴는 사용자에게 편리한 기능을 제공하며 이를 비활성화하면 사용자가 유용한 기능을 사용하지 못하도록 제한하는 것입니다.

이제 많은 사람들이 온라인에서 책을 읽으며 때로는 새 탭에서 열고 싶은 웹사이트의 링크가 있습니다. 이제 브라우저는 상황에 맞는 메뉴에서 이 기능을 제공하며 메뉴가 비활성화되면 사용자는 짜증을 낼 것입니다.

그러나 이를 위한 단축키가 있습니다. Ctrl 키를 누른 상태에서 링크를 클릭하면 새 탭으로 이동하고 Shift 키를 누른 상태에서 링크를 클릭하면 새 창으로 이동합니다.

하지만 사용자가 이를 모를 가능성이 상당하며, 사용자에게 방해가 될 것이다.

원치 않는 관심을 끌다

마우스 오른쪽 버튼을 비활성화하면 어떤 사람들은 당신이 숨기고 있는 것이 무엇인지 파악하기로 더 결심하게 됩니다. 그리고 이것은 사진과 소스 코드에 원치 않는 관심을 불러일으켜 역효과를 낼 수 있습니다.

또한 JavaScript가 활성화된 브라우저에서만 오른쪽 클릭을 비활성화할 수 있습니다. 방문자는 브라우저 설정에서 JavaScript를 꺼서 스크립트를 완전히 무시할 수 있습니다.

HTML 이벤트 처리기를 사용하여 오른쪽 클릭 비활성화

지금까지 우리는 개발자가 자신의 웹 사이트에서 마우스 오른쪽 버튼 클릭 컨텍스트 메뉴를 비활성화하는 이유와 그렇게 하면 안 되는 몇 가지 이유에 대해 논의했습니다. 이제 오른쪽 클릭을 비활성화하는 몇 가지 방법에 대해 설명하겠습니다.

HTML 요소의 oncontextmenu를 사용하여 웹 사이트에서 오른쪽 클릭 컨텍스트 메뉴를 쉽게 비활성화할 수 있습니다. 누군가 HTML 요소를 마우스 오른쪽 버튼으로 클릭하여 컨텍스트 메뉴를 표시하면 oncontextmenu 이벤트가 트리거됩니다.

이를 이해하려면 아래 코드를 확인하십시오.

<html>
    <body oncontextmenu="return false">
        <p>
            You cannot right-click here.
        </p>
    </body>
</html>

oncontextmenu를 false와 동일하게 설정합니다. 즉, 사용자가 웹 사이트에서 컨텍스트 메뉴를 열기 위해 마우스 오른쪽 버튼을 클릭하면 false가 반환되고 메뉴가 열리지 않습니다.

body 태그에 oncontextmenu를 넣었다는 것을 눈치채셨을 것입니다. 즉, HTML 본문을 마우스 오른쪽 버튼으로 클릭해도 컨텍스트 메뉴가 트리거되지 않습니다. 전체 페이지에서 마우스 오른쪽 버튼 클릭을 비활성화할 필요가 없습니다.

메뉴를 비활성화하는 유일한 목적이 이미지를 보호하는 것이라면 이미지 태그에 oncontextmenu를 추가할 수 있습니다.

JavaScript를 사용하여 오른쪽 클릭 비활성화

JavaScript를 사용하여 동일한 목표를 달성할 수도 있습니다. JavaScript를 사용하여 원하는 기능을 달성하는 방법을 보려면 아래 코드를 확인하십시오.

<html>
    <head>
        <script>
            document.addEventListener('contextmenu', event => event.preventDefault());
        </script>
    </head>
    <body>
        You cannot right-click here.
    </body>
</html>

addEventListener() 함수는 지정된 요소에 이벤트 핸들러를 추가합니다. 첫 번째 매개변수는 이벤트 유형(HTML DOM 이벤트와 유사)이고 두 번째 매개변수는 이벤트가 발생할 때 호출할 함수를 지정합니다.

이벤트가 취소 가능한 경우 preventDefault() 메서드는 이벤트의 기본 작업이 발생하지 않도록 중지합니다.

이미지 오른쪽 클릭 비활성화

이 방법에서는 웹 사이트의 이미지 보호에만 중점을 둘 것입니다. 위에서 설명한 것처럼 전체 페이지에서 오른쪽 클릭을 비활성화하면 사용자에게 좋은 인상을 남기지 않습니다.

JavaScript의 도움으로 쉽게 할 수 있습니다. HTML 페이지의 전체 본문 대신 HTML의 image 태그만 대상으로 지정할 수 있습니다.

방법을 이해하려면 아래 코드를 확인하십시오.

<html>
    <head>
        <script>
            document.addEventListener("contextmenu", function(e){
                if (e.target.nodeName === "IMG") {
                    e.preventDefault();
                }
            }, false);
        </script>
    </head>
    <body>
        <img src="/img/DelftStack/logo.png"/>
    </body>
</html>

코드를 자세히 살펴보겠습니다.

이 시점에서 JavaScript의 addEventListener() 기능을 이해하셨을 것입니다. 이전에 함수의 매개변수에 대해 살펴보았으므로 첫 번째 매개변수에 지정된 이벤트가 발생할 때 트리거될 함수를 나타내는 두 번째 매개변수를 살펴보겠습니다.

이벤트가 발생하면 이벤트를 발생시키는 요소를 이미터(Emitter), 대상(Target), 간단히 말해 대상은 특정 이벤트를 트리거한 DOM 요소를 반환합니다. nodeName 함수는 요소의 노드 이름을 반환합니다.

결론적으로 e.target.nodeName은 사용자가 마우스 오른쪽 버튼을 클릭한 요소 이름을 반환합니다. 코드에서 클릭한 요소 이름이 IMG인 경우 첫 번째 매개 변수에 지정된 이벤트를 수행하지 않아야 함을 확인했습니다.