그러나 때때로 우리는 방문자가 오른쪽 클릭 메뉴를 사용하는 것을 금지하거나 오른쪽 클릭 메뉴의 특정 기능을 차단하려는 경우가 있습니다. 마우스 오른쪽 버튼 클릭 메뉴를 통해 웹 페이지의 소스 코드를 보려면 마우스 오른쪽 버튼 클릭으로 웹 콘텐츠를 선택, 복사 등하는 것을 원하지 않습니다. 이 문제를 고려할 때 많은 웹 디자이너는 단순히 마우스 오른쪽 버튼 클릭을 차단합니다. 이 작업을 수행하는 대신 스크립트를 사용하여 스타일이 지정된 오른쪽 클릭 메뉴를 구현하고 이를 이 오른쪽 클릭 메뉴에 자체 콘텐츠 로드에 추가할 수도 있습니다. 이제 이 아이디어를 시험해 보겠습니다.
가장 먼저 고려해야 할 것은 마우스 오른쪽 버튼 클릭 이벤트를 통해 함수를 호출하는 것입니다. 이 함수는 새로운 오른쪽 클릭 메뉴의 내용을 표시하는 데 사용됩니다. document.oncontextmenu를 통해 마우스 오른쪽 클릭 이벤트가 호출된다는 것을 알고 있는데, document.oncontextmenu = 특정 함수를 정의하면 새로운 오른쪽 클릭 메뉴를 호출할 수 있다. 이를 통해 메뉴를 어떻게 제어할 것인가가 핵심이다. 동시에 폼의 클릭 이벤트 document.body.onclick(일반적으로 왼쪽 클릭을 나타냄)을 통해 메뉴를 숨겨야 합니다. 이 프로세스를 통해 오른쪽 클릭 메뉴의 팝업 및 숨기기가 완료됩니다.
먼저 이 스크립트 코드를 살펴보겠습니다:
/*초기화*/
<스크립트 언어="JavaScript1.2">
/*현재 브라우저가 Internet Explorer인 경우 document.all은 true를 반환합니다*/
if (document.all && window.print) {
/*메뉴 상자의 표시 스타일 선택*/
ie5menu.className = menuskin;
/*마우스 오른쪽 버튼 이벤트를 리디렉션하는 처리 프로세스는 사용자 정의 프로그램 showmenuie5*/
document.oncontextmenu = showmenuie5;
/*왼쪽 마우스 버튼 이벤트를 리디렉션하는 처리 프로세스는 사용자 정의 프로그램 hidemenuie5*/
document.body.onclick = hidemenuie5;
}
</script>
일반적으로 페이지가 로드된 후에 마우스 오른쪽 버튼 이벤트가 발생하므로 페이지 로드 속도에 영향을 주지 않도록 페이지 끝에 이 코드를 넣을 수 있습니다. 이 코드는 매우 간단합니다. 먼저 IE 브라우저인지 확인하세요. 그렇다면 다음 정의가 유효해야 합니다. 즉, 클라이언트가 사용하는 브라우저가 IE인 것으로 감지되면 사용자가 마우스 오른쪽 버튼 클릭 이벤트를 생성할 때 showmenuie5 함수가 호출되고, 사용자가 왼쪽 클릭 이벤트를 생성할 때 hidemenuie5 함수가 호출됩니다.
위의 문제를 해결했다면 이제 showmenuie5 함수와 hidemenuie5 함수를 통해 메뉴를 표시하고 숨기는 방법을 고려해야 합니다. 물론 여기 메뉴는 실제 우클릭 메뉴가 아니고 저희가 직접 만든 div이고, 이 div에 넣고 싶은 것들을 넣어두었습니다. 마우스 이벤트를 통해 함수를 호출하여 가시성을 제어하면 마우스 오른쪽 버튼을 사용하는 것과 동일한 효과를 얻을 수 있습니다.