웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
오늘 알아볼 내용은 특별한 요소 및 텍스트를 드래그 하여 선택하는 것을 막기위한 방법에 대하여 자세히 알아보도록 한다. 어떻게 하면 방문자의 영역 복사를 막을 수 있을까? 먼저 이런 경우가 언제 필요할까?
이유야 많을 수 있겠으나 자신의 콘텐츠가 다른 사람에게 손쉽게 사용되는 것을 막기 위함도 하나의 이유로 볼 수 있을 것이다. 물론 소스보기 등의 방법을 막을 수는 없지만 간단한 방법을 사용해 복사하는 등의 방법은 못하도록 하는 최소한의 예방책이라 할 수 있을 것이다. 그럼 아래는 이를 수행하기 위한 코드를 알아보자.
아래의 자바스크립트는 특정 요소 위에서 마우스를 올려 어떤 행동을 할 경우 이를 막는 코드이다. 아래 코드를 보자.
위 코드는 특정 요소에서 mousedown 또는 mousemove 그리고 touchstart 등의 이벤트가 발생할 경우 이를 막는 함수를 동작시킨다. 여기서 실행하는 preventDefault()는 발생한 이벤트를 실행시키지 않고 중지하는 역할을 한다.
이 코드에는 이벤트 touchstart 역시 추가되어 있는데 이는 모바일 및 태블릿 등에서도 이 코드가 동작하기 위함이다. 만약 웹사이트 시작시 이를 함수로 등록시켜 실행하려면? 아래와 같이 사용하면 된다.
body 태그안에 있는 모든 태그들은 위 함수에 영향을 받게 될 것이다. 제이쿼리를 사용하여 영역 및 텍스트 복사를 막는 방법을 알아보았다!
이유야 많을 수 있겠으나 자신의 콘텐츠가 다른 사람에게 손쉽게 사용되는 것을 막기 위함도 하나의 이유로 볼 수 있을 것이다. 물론 소스보기 등의 방법을 막을 수는 없지만 간단한 방법을 사용해 복사하는 등의 방법은 못하도록 하는 최소한의 예방책이라 할 수 있을 것이다. 그럼 아래는 이를 수행하기 위한 코드를 알아보자.
! 텍스트 및 영역 드래그, 복사 막는 소스코드 보기
아래의 자바스크립트는 특정 요소 위에서 마우스를 올려 어떤 행동을 할 경우 이를 막는 코드이다. 아래 코드를 보자.
<script>
$(선택한 요소).on('mousedown mousemove touchstart', function(event) {
event.preventDefault();
});
</script>
$(선택한 요소).on('mousedown mousemove touchstart', function(event) {
event.preventDefault();
});
</script>
위 코드는 특정 요소에서 mousedown 또는 mousemove 그리고 touchstart 등의 이벤트가 발생할 경우 이를 막는 함수를 동작시킨다. 여기서 실행하는 preventDefault()는 발생한 이벤트를 실행시키지 않고 중지하는 역할을 한다.
이 코드에는 이벤트 touchstart 역시 추가되어 있는데 이는 모바일 및 태블릿 등에서도 이 코드가 동작하기 위함이다. 만약 웹사이트 시작시 이를 함수로 등록시켜 실행하려면? 아래와 같이 사용하면 된다.
<script>
var preventStart = function() {
$('body').on('mousedown mousemove touchstart', function(event) {
event.preventDefault();
});
}
$(function() {
preventStart();
});
</script>
var preventStart = function() {
$('body').on('mousedown mousemove touchstart', function(event) {
event.preventDefault();
});
}
$(function() {
preventStart();
});
</script>
body 태그안에 있는 모든 태그들은 위 함수에 영향을 받게 될 것이다. 제이쿼리를 사용하여 영역 및 텍스트 복사를 막는 방법을 알아보았다!
아래의 글도 찾고 계시지 않나요?