본문 바로가기
웹개발지식쌓기

[front] 페이지 우클릭 방지하기 <body oncontextmenu="return false">

by developer_j 2022. 11. 1.
728x90
반응형

 

회사 웹페이지 중 새창을 띄우는 html의 body 태그에 이 속성이 붙어있길래 확인해본 내용

<body oncontextmenu="return false">

우클릭을 방지한다고 한다.

딱히 body에만 붙일 수 있는 것은 아니고, 다른 모든 요소에도 붙일 수 있는 것 같다. 그럼에도 불구하고 왜 body에다 먹이느냐? body에 먹여놔야 꼼수 복사를 막을 수 있기 때문.

 

1. 태그 속성값

1-1. oncontextmenu="return false" [드래그 선택 가능, 우클릭 불가]

우클릭 방지 기능.

캡쳐

드래그 선택은 가능하지만 우클릭 했을 때 창이 나타나지 않는다.

 

1-2.onselectstart="return false" [드래그 선택 불가, 우클릭 가능]

드래그 해서 선택하는거 방지

 

 

** 다만, 다른 드래그 선택 가능한 요소가 있다면 그 요소부터 긁었을때는 드래그 선택 내용에 포함이 된다. 예를 들어 아래가 가능하다.

 

캡처

 

원래의 의도대로라면 두번째줄은 드래그 선택이 불가능 해야한다.

따라서, 보통 드래그가 안먹히게 하고싶은 내용이 있다면 body 자체에 드래그 선택 방지 속성을 먹여서 페이지 전체를 드래그 선택하지 못하게 하는 것 같다.

 

1-3.ondragstart="return false" [드래그 선택 가능, 우클릭 가능]

끌어서 옮기는 드래그 방지

캡쳐

 

글을 옮기고 싶을 때 텍스트를 선택에서 복사 붙여넣기 하는 경우도 있지만, 직접 끌어서 옮기기도 한다. 그러한 끌어서 옮기기를 방지하는 속성인데, 위와 같이 우클릭이 가능하다.

따라서, 만약 페이지 내용 복사 자체를 방지하려고 한다면 소개된 1번, 2번, 3번의 속성을 한번에 붙여두곤 한다.

<body oncontextmenu='return false' onselectstart='return false' ondragstart='return false'></body>

 

 

2. 사용법

사용법은 html 태그에 직접 붙일수도 있고, 자바스크립트, 제이쿼리 등등 일반 속성 이용하듯 붙이면 된다.

 

!! 상세 설명 및 사용법 참고 !!

https://9d4u.tistory.com/364

 

[html]웹 페이지 마우스 우클릭 방지

웹 페이지 구현 시, 마우스 오른쪽 버튼 사용을 제한(차단)하는 기능을 구현할 수 있는 방법을 소개합니다. 1. body 태그 요소에 이 내용을 입력합니다.- oncontextmenu='return false'

9d4u.tistory.com

 

 

728x90
반응형