CSS

드래그&우클릭 방지

Kale_coding 2022. 5. 10. 09:29

방법1) CSS

body {
  -ms-user-select: none; 
  -moz-user-select: none; 
  -webkit-user-select: none; 
  -khtml-user-select: none; 
  user-select: none;
}

부분 영역만 설정하고 싶은 경우에는 class로 지정하여 해당 영역에 class를 부여하면 된다.

방법1의 경우 드래그가 안되는 것 처럼 보이지만 복사, 붙여넣기를 하면 복사가 된다.

 

방법2 )HTML, JS

<head>
  <script type="text/javascript">
    document.oncontextmenu = function(){return false;}
  </script>
</head>
<body oncontextmenu="return false" onselect="return false" ondragstart="return false" onkeydown="return false">
  <div>
    내용내용
  </div>
</body>

방법2의 경우 body에 넣으면 input, textarea등의 텍스트 박스에 입력이 되지 않으므로 드래그, 우클릭 방지를 원하는 영역에 넣어주어야 한다.