728x90
a 링크에서 이동 없이 JavaScript 함수만 실행하기
웹 개발 시 <a> 태그를 사용하면서 특정 작업을 위해 페이지 이동 없이 JavaScript 함수만 실행하고 싶을 때가 있습니다. 이 경우, 링크의 기본 동작(페이지 이동)을 막아야 합니다. 이 글에서는 이를 구현하는 방법과 함께 간단한 예제를 제공합니다.
기본 동작 막기: event.preventDefault()
<a> 태그는 클릭 시 기본적으로 href 속성에 지정된 URL로 이동합니다. 이를 막으려면 JavaScript의 event.preventDefault()를 사용하면 됩니다.
event.preventDefault()는 이벤트의 기본 동작을 중단시키는 함수입니다.
방법 1: onclick 속성 사용
HTML의 onclick 속성에서 JavaScript 코드를 실행하면서 기본 동작을 막는 방법입니다.
<a href="https://example.com" onclick="myFunction(event)">링크</a>
<script>
function myFunction(event) {
event.preventDefault(); // 기본 동작 막기
alert("JavaScript 함수가 실행되었습니다!");
}
</script>
위 코드에서 event.preventDefault()는 링크의 이동을 막아줍니다. 대신 함수 내부에서 원하는 동작을 정의할 수 있습니다.
방법 2: JavaScript로 이벤트 핸들러 추가
HTML을 변경하지 않고 JavaScript 코드에서 이벤트를 추가하는 방식입니다.
<a href="https://example.com" id="myLink">링크</a>
<script>
document.getElementById("myLink").addEventListener("click", function(event) {
event.preventDefault(); // 기본 동작 막기
alert("JavaScript 함수가 실행되었습니다!");
});
</script>
addEventListener를 사용하면 HTML 코드와 JavaScript 코드를 분리하여 관리할 수 있어 유지보수가 용이합니다.
방법 3: href="#"와 return false 사용
간단한 방식으로, return false를 활용하여 링크 이동을 막을 수 있습니다.
<a href="#" onclick="return myFunction()">링크</a>
<script>
function myFunction() {
alert("JavaScript 함수가 실행되었습니다!");
return false; // 기본 동작 막기
}
</script>
return false는 onclick 핸들러 내에서 실행되어, 기본 동작을 막는 역할을 합니다.
정리
<a> 태그의 기본 동작을 막으려면 다음 세 가지 방법 중 상황에 맞는 것을 선택하면 됩니다:
- onclick 속성에서 event.preventDefault() 사용
- JavaScript에서 addEventListener로 이벤트 핸들러 추가
- return false 활용
아래는 위의 예제를 종합한 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>a 링크 이동 막기</title>
</head>
<body>
<h3>방법 1: onclick 속성</h3>
<a href="https://example.com" onclick="myFunction(event)">링크 1</a>
<h3>방법 2: JavaScript로 추가</h3>
<a href="https://example.com" id="myLink">링크 2</a>
<h3>방법 3: return false 사용</h3>
<a href="#" onclick="return myFunction()">링크 3</a>
<script>
function myFunction(event) {
if (event) event.preventDefault(); // 방법 1, 2
alert("JavaScript 함수가 실행되었습니다!");
return false; // 방법 3
}
document.getElementById("myLink").addEventListener("click", function(event) {
myFunction(event); // 방법 2
});
</script>
</body>
</html>LIST
'Develop' 카테고리의 다른 글
| [PostgreSQL] 나누기 연산 소수점 계산하기 (4) | 2024.12.16 |
|---|---|
| [JavaScript] history pushState 와 replaceState 이해하기 (6) | 2024.12.11 |
| Java의 객체 지향 프로그래밍 원칙 (OOP Principles in Java) (6) | 2024.11.10 |
| [jQuery] script 실행 순서 ready, load 및 기타 실행 순서 제어 방법 (5) | 2024.11.07 |
| [jQuery] click 이벤트와 touchend 이벤트의 차이점 및 예제 (6) | 2024.11.05 |