반응형
외주로 웹사이트 작업을 하게 되었는데 클라이언트 측에서 마우스 우클릭 & 드래그 방지 기능을 요청했다. 그래서 홈페이지 내에 마우스 우클릭과 드래그를 막는 코드를 적용했는데, 왠지 나중에 또 필요한 곳이 있을 듯 하여 블로그에 기록해두려고 한다.
웹사이트 마우스 우클릭 방지 / 드래그 방지를 하려면 2단계의 과정을 거쳐야 한다. 순서대로 따라하면 어렵지 않을 것이다.
첫번째로 <head> ~ </head> 사이에 script 코드를 넣는다.
<script type="text/javascript">
document.oncontextmenu = function(){return false;}
</script>
두번째로 <body> 아래에 html 코드를 넣는다.
<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false" onkeydown="return false">
위의 두가지 코드를 삽입한 후 저장을 하면, 웹사이트 내에서 마우스 우클릭이나 드래그를 시도해도 아무런 반응이 없는 것을 확인할 수 있을 것이다. 각 코드의 의미도 함께 알아두도록 하자.
oncontextmenu = "return false" : 우클릭 방지
onseletstart = "return false" : 마우스 드래그 방지
ondragstart = "return false" : 이미지 복사 드래그 방지
onkeydown = "return false" : 키보드 단축키 복사 방지
물론, 이러한 작업을 한다고 모든 퍼가기를 막을 수 있는 것은 아니다. 개발자 도구에서 링크를 이용하거나 캡처 기능을 사용하는 이들을 막을 수는 없다. 하지만 정성을 들여 제작한 컨텐츠를 지키려는 노력의 일환이기도 하고, 적용하는 것이 까다롭지도 않으니... 웹사이트나 블로그를 운영중이라면 고려해 보는 것이 좋을 듯 하다.
반응형
'프로그래밍 언어 & 데이터베이스 > JavaScript' 카테고리의 다른 글
| 자바스크립트 변수 선언하기 (0) | 2021.07.13 |
|---|---|
| 자바스크립트 자료형 타입(Java Script - Data type) (0) | 2021.07.12 |
| 함수(function) 기초 - 매개변수(parameter), 인자(argument), 리턴(return) (0) | 2020.10.08 |
| 함수(function) 기초 (0) | 2020.08.20 |
| 반복문에 배열 활용하기 (0) | 2020.08.18 |
댓글