반응형
* 마우스 드래그 방지 구현
원리
마우스 드래그 방지는 HTML/CSS/JavaScript 이벤트를 차단하는 원리입니다.
- CSS 방식: 텍스트 선택 자체를 비활성화합니다.
- JavaScript/HTML 이벤트 방식: 드래그 시작 이벤트(ondragstart)나 텍스트 선택 이벤트(onselectstart)를 return false로 처리합니다.
예시 코드
CSS로 구현
css
/* 전체 페이지 드래그 불가 */
body {
-webkit-user-select: none; /* Chrome, Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none; /* 표준 속성 */
}
/* 특정 영역만 드래그 허용 */
.allow-drag {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
HTML/JavaScript로 구현
xml
<body onselectstart="return false" ondragstart="return false">
<p>이 문장은 드래그할 수 없습니다.</p>
<p class="allow-drag">이 문장만 드래그 가능합니다.</p>
</body>
또는 JavaScript 코드로 이벤트 차단을 설정할 수도 있습니다:
javascript
document.addEventListener('dragstart', (e) => e.preventDefault());
document.addEventListener('selectstart', (e) => e.preventDefault());
특정 요소만 텍스트 선택 허용
원리
- user-select: none으로 전체 페이지의 텍스트 선택을 비활성화합니다.
- 선택을 허용할 요소에는 user-select: text를 적용합니다.
예시 코드
html
<style>
/* 전체 페이지 선택 금지 */
body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
/* 특정 요소만 선택 허용 */
.select-allow { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }
</style>
<body>
<p>이 문장은 선택할 수 없습니다.</p>
<p class="select-allow">이 문장은 선택할 수 있습니다.</p>
</body>
마우스 우클릭 방지 구현
원리
마우스 오른쪽 클릭 시 발생하는 contextmenu 이벤트를 가로채서 preventDefault()를 호출하면, 브라우저의 기본 컨텍스트 메뉴가 표시되지 않습니다.
예시 코드
HTML 속성 방식
xml
<body oncontextmenu="return false">
<p>이 페이지에서는 마우스 우클릭이 비활성화되어 있습니다.</p>
</body>
JavaScript 방식
javascript
document.addEventListener('contextmenu', (event) => {
event.preventDefault();
alert('이 페이지에서는 우클릭이 제한되어 있습니다.');
});
특정 요소만 우클릭 허용
원리
- contextmenu 이벤트를 전체 문서에 등록하여 우클릭을 차단합니다.
- 단, 특정 요소(event.target)가 허용 대상이면 preventDefault()를 호출하지 않습니다.
예시 코드
xml
<body>
<p>이 영역에서는 우클릭이 막힙니다.</p>
<div id="allowed-area" style="background:#d0f0d0; padding:15px; margin-top:10px;">
이 영역에서는 우클릭이 허용됩니다. </div>
<script>
const allowArea = document.getElementById('allowed-area');
document.addEventListener('contextmenu', (event) => {
// 허용 영역이 아닌 경우에만 우클릭 차단
if (!allowArea.contains(event.target))
{ event.preventDefault(); alert('이 영역에서는 우클릭이 제한되어 있습니다.'); }
});
</script>
</body>
*허용시킬 요소가 여러 개 인 경우...
const allowedElements = document.querySelectorAll('.right-allow');
document.addEventListener('contextmenu', (event) => {
let allowed = false;
allowedElements.forEach(el => {
if (el.contains(event.target)) allowed = true;
});
if (!allowed) event.preventDefault();
});
document.addEventListener('contextmenu', (event) => {
let allowed = false;
allowedElements.forEach(el => {
if (el.contains(event.target)) allowed = true;
});
if (!allowed) event.preventDefault();
});
이 코드는 event.target이 허용된 요소(또는 그 하위 자식)일 경우에만 우클릭이 작동하게 하며, 그 외 영역은 전부 차단됩니다.
💡 참고: 개발자 도구(F12)에서 JavaScript를 비활성화하거나 코드 제거로 쉽게 우회할 수 있기에, 드래그/우클릭 방지는 사용자 경험 향상용 또는 간단한 안내 수준으로만 사용하는 것이 좋습니다.
원리를 요약하면,
- 드래그 방지: user-select:none; 또는 onselectstart/ondragstart 이벤트 차단.
- 우클릭 방지: contextmenu 이벤트를 막아 브라우저 메뉴가 뜨지 않게 함.