728x90
반응형
참고: https://codinhood.com/nano/dom/disable-context-menu-right-click-javascript
브라우저의 전체 페이지에서 우클릭 방지
페이지에서 우클릭을 하면 브라우저는 contextmenu 이벤트를 발생시킵니다. 컨텍스트 메뉴에는 일반적으로 "페이지 소스 보기"나 "검사" 같은 기능이 들어있습니다. contextmenu 이벤트에 핸들러를 추가하고 event.preventDefault()를 사용하면 우클릭으로 컨텍스트 메뉴가 표시되지 않게 할 수 있습니다. 이 이벤트 리스너를 window 객체에 추가하여 전체 페이지에서 우클릭을 방지할 수 있습니다.
window.addEventListener("contextmenu", e => e.preventDefault());특정 요소에만 우클릭 방지
이벤트 리스너를 특정 HTML 요소에 추가하고 event.preventDefault()를 호출하여 그 요소에만 마우스 우클릭을 막을 수 있습니다.
const noRightClick = document.getElementId("myElement");
noRightClick.addEventListener("contextmenu", e => e.preventDefault());
요소의 oncontextmenu 속성을 사용하여 우클릭 방지
body 요소의 oncontextmenu 속성을 false로 반환하여 컨텍스트 메뉴를 비활성화할 수도 있습니다.
<body oncontextmenu="return false;">
...
</body>위의 예제처럼 페이지 전체에 우클릭을 막을 수도 있고 다음 예제와 같이 특정 요소에만 적용할 수도 있습니다.
<canvas oncontextmenu="return false;"></canvas>관련 글
반응형
'dev > javascript' 카테고리의 다른 글
| [javascript] 자바스크립트 fetch로 JSON post (then, async, await) (2) | 2023.02.01 |
|---|---|
| [javascript] 자바스크립트 라디오 버튼 사용방법 (3) | 2023.01.30 |
| [javascript] 자바스크립트 문자열내의 문자열 찾기 (substring) (1) | 2022.12.28 |
| [javascript] 자바스크립트 다크모드 확인 (0) | 2022.12.01 |
| [javascript] 자바스크립트 스프라이트 애니메이션 (1) | 2022.11.29 |
댓글