[JavaScript] 이벤트 중지시키는 여러가지 방법

a 태그를 클릭했을 때 href 로 링크이동을 막는 예시로 하겠다.

 

1. onclick 에 return false

<a href="http://www.naver.com" onclick="fn2(); return false;">링크 2</a> 

<script>
	function fn2() {
    	alert("fn2");
    }
</script>

 

2. onclick에서 return 함수; 하고 함수에서 return false

<a href="http://www.naver.com" onclick="return fn3();">링크 3</a>

<script>
	function fn3() {
    	alert("fn3");
        return false;
    }
</script>

 

3. window가 가지고있던 이벤트객체로 .preventDefault() 함수 호출

<a href="http://www.naver.com" onclick="fn4();">링크 4</a> 

<script>
	function fn4() {
            alert("fn4");
            let e = window.event;   // window는 방금 일어난 event 객체를 가지고 있다.
            e.preventDefault();     // 이벤트 중지 -> 네이버로 안 넘어감
        }
</script>

 

4. id를 사용하여 addEventListener과 이벤트 객체 e 사용

<a href="http://www.naver.com" id="link5">링크 5</a> <!-- 요즘 쓰는 방법!!!! -->

<script>
        let link5 = document.getElementById("link5");
        link5.addEventListener("click", function(e) {
            alert("link5");
            e.preventDefault();
        });
</script>