제이쿼리 JQuery 활용하여 <a href="#"> 클릭 이벤트 무시(막기)하는 방법
자바스크립트 중 하나인 제이쿼리를 활용하여 a href에 URL 링크 주소가 들어가지 않고 그냥 #을 넣었을 경우 클릭을 하게 되면 페이지 맨 위로 올라가는 현상이 있습니다. 가장 기본이 되는 현상인데 이걸 원하지 않고 그냥 클릭했을 경우 아무런 반응이 없는, 즉 페이지가 제자리에 머물러 있게 만들고 싶은 경우 입니다. 두 가지 방법으로 진행이 가능합니다.
jQuery 구성
가장 먼저 소개하는 방법은 제이쿼리를 이용한 방법 입니다. 이 방법의 장점은 사이트 내 모든 a href="#" 을 사용하는 링크 태그에 클릭 방지를 걸 수 있는 방법입니다. 한 마디로 광역 마법인 샘 입니다. 코드는 다음과 같습니다.
<script>
$(document).ready(function() {
// a href='#' 클릭 무시 스크립트
$('a[href="#"]').click(function(ignore) {
ignore.preventDefault();
});
});
</script>
이 스크립트를 <head> 안쪽에 그대로 삽입하시면 됩니다. 별도로 세팅할 필요가 없이 아주 간편하게 적용시킬 수 있습니다. 아래는 <a href="#"> 이 들어간 링크들 입니다. 한번 직접 마우스로 클릭해 보시기 바랍니다. 전혀 변화가 없습니다.
그리고 위의 링크 중 첫번째에는 target="_blank" 옵션이 없고 두번째에만 해당 옵션이 들어 있습니다. 결론은 해당 제이쿼리로 인해서 새창띄우기 태그가 들어있어도 이 모든것을 다 무시하고 브라우저 상에서는 아무런 반응이 없다는걸 알 수 있습니다. 아래에 위의 제이쿼리 코드가 들어 있는 메모장을 올려놨습니다. 다운 받으셔서 사용하시면 됩니다.
a href 클릭 무시 제이쿼리.txt
onclick 이벤트 구성
이번에는 간단하게 클릭 막기를 시전할 수 있는 온클릭 이벤트를 활용하는 방법 입니다. 이 방법의 장점은 특정 페이지, 혹은 특정 링크 부분만 클릭 방지를 걸 수 있는 집중 마법과 같은 방법 입니다. 태그는 다음과 같습니다.
<a href="#" onclick="return false;">클릭 막기 예시2</a>
기존의 a href 태그 안쪽에 onclick="return false;" 이벤트 태그를 붙여넣기만 하면 되는 간단한 방법 입니다. 이 방법으로 아래에 예시 링크를 만들었습니다. 한번 직접 클릭해 보시기 바랍니다. 아무런 반응이 없을 것 입니다.
이 예시에도 하나에는 새창 띄우기 옵션이 있고, 다른 하나의 링크에는 없습니다. 있든 없든 결과 값은 같다는걸 확인이 가능합니다. 지금까지 소개해드린 두 가지 방법 중 본인이 가장 사용하기 쉬운 방법을 선택하시거나 상황에 맞는 방법을 골라서 사용하시면 될 것 같습니다. 끝.
"친절한효자손 취미생활" 을 검색!
