href 속성이 #으로 시작하는 링크는 실제 페이지 이동 없이 빈 앵커로 사용되는 경우가 많습니다. 이런 링크를 클릭했을 때 아무런 동작도 일어나지 않도록 만들려면 JavaScript의 preventDefault() 메서드를 활용하면 됩니다. 다음은 이를 구현한 예제 코드입니다.
예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<a href="urlLink">Press Me to see logs</a>
<a href="urlLink">Press Me to see logs in console</a>
<a href="#">Nothing will happen</a>
<script>
$(function(){
$("a:not([href='#'])").click(function(event){
event.preventDefault();
console.log("You have pressed me!!!!!");
});
});
</script>
</body>
</html>
위 코드에서 핵심은 선택자 $("a:not([href='#'])")입니다. 이 선택자는 href 값이 '#'이 아닌 모든 <a> 태그만 골라내므로, href가 '#'인 링크는 클릭 이벤트 대상에서 자연스럽게 제외됩니다. 선택된 링크에는 event.preventDefault()가 적용되어 브라우저의 기본 이동 동작이 차단되고, 대신 콘솔에 메시지가 출력됩니다.
실행 방법
위 프로그램을 실행하려면 파일 이름을 anyName.html(index.html)로 저장한 뒤 해당 파일을 마우스 오른쪽 버튼으로 클릭하세요. 이후 VS Code 편집기에서 Open with Live Server(라이브 서버로 열기) 옵션을 선택하면 브라우저에서 바로 결과를 확인할 수 있습니다.
출력 결과
Press Me to see logs와 Press Me to see logs in console 두 개의 링크를 클릭하면 콘솔에 정상적으로 출력 결과가 표시됩니다. 반면, Nothing will happen 링크를 클릭하면 아무 내용도 출력되지 않습니다.
위 화면에서는 Press Me to see logs 링크를 클릭하여 콘솔에 메시지가 출력되는 것을 확인할 수 있습니다.
반대로 Nothing will happen 링크를 클릭하면 아래 결과와 같이 콘솔에 아무것도 기록되지 않습니다.
