마우스 우클릭 드래그 방지
1. 마우스 우클릭 방지
oncontextmenu="return false"
위에 있는 내용을 넣으면 마우스 우클릭을 사용할 수 없습니다.div에서도 사용할 수 있습니다.
■ 예시
<div style="width:300px; height:100px; border: solid 1px grey; background-color: #E9E9E9; text-align:center;" oncontextmenu="return false">
<p>이 공간에서는<br>마우스 우클릭이 안 됨.</p>
</div >
<p>이 공간에서는<br>마우스 우클릭이 안 됨.</p>
</div >
■ 결과물
이 공간에서는
마우스 우클릭이 안 됨.
2. 마우스 드래그 방지
ondragstart="return false"
위에 있는 내용을 넣으면 이미지, 텍스트, 파일 같은 것을 옮길 때의 드래그가 금지됩니다. 드래그로 인한 영역 선택은 해당되지 않습니다.div에서도 사용할 수 있습니다.
■ 예시
이미지를 드래그해서 옆에 있는 사각형 박스로 옮겨보세요.
이 공간에서는 마우스 드래그 금지로 이미지를 옮길 수 없음.
3. 영역 선택 방지
onselectstart="return false"
위에 있는 내용을 넣으면 마우스 드래그, 키보드로 이미지나 텍스트의 영역을 선택할 수 없습니다.div에서도 사용할 수 있습니다.
■ 예시
<div style="width:300px; height:100px; border: solid 1px grey; background-color: #E9E9E9; text-align:center;" onselectstart="return false">
<p>이 공간에서는<br>영역을 선택할 수 없음.</p>
</div >
<p>이 공간에서는<br>영역을 선택할 수 없음.</p>
</div >
■ 결과물
이 공간에서는
영역을 선택할 수 없음.
4. 부분적 허용
oncontextmenu="event.cancelBubble=true;"
ondragstart="event.cancelBubble=true;"
onselectstart="event.cancelBubble=true;"
event.cancelBubble=true 는 이벤트가 전파되지 않도록, 이벤트를 캔슬시킵니다. 그래서 위에서 방지시켰던 항목을 예외적으로 허용하는 용도로 사용할 수 있습니다.ondragstart="event.cancelBubble=true;"
onselectstart="event.cancelBubble=true;"
■ 예시
이 공간에서는 마우스 우클릭, 드래그, 영역 선택이 불가능함.
5. 소스 코드
<script>
document.oncontextmenu = function () { return false; }; // 마우스 우클릭 금지
document.ondragstart = function () { return false; }; // 마우스 드래그 금지
document.onselectstart = function () { return false; }; // 영역 선택 금지
</script>
범위는 페이지 전체에 해당합니다. 블로그, 홈페이지 테마 HTML 수정을 통해 모든 페이지에 적용시킬 수 있습니다.document.oncontextmenu = function () { return false; }; // 마우스 우클릭 금지
document.ondragstart = function () { return false; }; // 마우스 드래그 금지
document.onselectstart = function () { return false; }; // 영역 선택 금지
</script>
<head>
위에 있는 소스 코드를 복사해서 head 사이인 여기에 붙여넣으면 됩니다.
</head>
또는
<body>
위에 있는 소스 코드를 복사해서 body 사이인 여기에 붙여넣으면 됩니다.
</body>
위에 있는 소스 코드를 복사해서 head 사이인 여기에 붙여넣으면 됩니다.
</head>
또는
<body>
위에 있는 소스 코드를 복사해서 body 사이인 여기에 붙여넣으면 됩니다.
</body>
<body oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
</body>
위에 있는 소스 코드도 범위가 페이지 전체에 해당합니다. ('마우스 우클릭, 드래그, 선택 영역 방지) 위에 있는 것과 똑같이 <body>를 찾아서 안에 파란색으로 표시된 소스 코드를 넣습니다.</body>
<script>
document.oncontextmenu = function () { event.cancelBubble=true; }; // 마우스 우클릭 허용
document.ondragstart = function () { event.cancelBubble=true; }; // 마우스 드래그 허용
document.onselectstart = function () { event.cancelBubble=true; }; // 영역 선택 허용
</script>
범위는 페이지 전체에 해당합니다. 모든 페이지에 방지가 적용된 경우 일부 페이지를 부분적으로 허용할 수 있습니다. (블로그라면 포스트를 작성 시 HTML 수정)document.oncontextmenu = function () { event.cancelBubble=true; }; // 마우스 우클릭 허용
document.ondragstart = function () { event.cancelBubble=true; }; // 마우스 드래그 허용
document.onselectstart = function () { event.cancelBubble=true; }; // 영역 선택 허용
</script>
<head>
위에 있는 소스 코드를 복사해서 head 사이인 여기에 붙여넣으면 됩니다.
</head>
또는
<body>
위에 있는 소스 코드를 복사해서 body 사이인 여기에 붙여넣으면 됩니다.
</body>
위에 있는 소스 코드를 복사해서 head 사이인 여기에 붙여넣으면 됩니다.
</head>
또는
<body>
위에 있는 소스 코드를 복사해서 body 사이인 여기에 붙여넣으면 됩니다.
</body>
<div oncontextmenu="event.cancelBubble=true;" ondragstart="event.cancelBubble=true;" onselectstart="event.cancelBubble=true;">
</div>
범위는 div 영역 한정으로 우클릭, 드래그, 선택 영역 방지를 해제할 수 있습니다. 위에 있는 것과 똑같이 <div>를 찾아서 안에 파란색으로 표시된 소스 코드를 넣습니다.
</div>
Comments
Post a Comment