목차
반응형
브라우저 마우스 우클릭 비활성화
페이지에서 우클릭을 하면
브라우저는 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>· 참고 페이지
How to Disable Right Click Context Menu in Javascript
How to disable the context menu when a user right clicks on your website with Javascript.
codinhood.com
반응형
'IT인터넷' 카테고리의 다른 글
| 티스토리 블로그 글 작성 시 키워드 수 확인 및 텍스트 카운터 설치 (0) | 2023.06.30 |
|---|---|
| 티스토리 개발자 도구 F12 활성화 막기 자바스크립트 (0) | 2023.06.30 |
| 티스토리 특정 부분만 드래그 허용하는 방법 CSS 수정 (0) | 2023.06.30 |
| 티스토리 SEO 설정 '로딩화면' 만들기... 애드센스 효과 기대 (0) | 2023.06.26 |
| 티스토리 스킨 '애드센스' 광고 위치 잘림 해결 방법 (0) | 2023.06.26 |
| 티스토리에 GIF 파일을 MP4로 변환해서 사용하는 방법 (0) | 2023.06.26 |