[Web] <a/> 태그에서 웹페이지 이동 이벤트 막기

<a>태그에서 웹페이지 이동 이벤트를 막기 위해서는 어떻게 해야할까요?

1. href 속성을 'javascript:void(0);'으로 지정해준다.
-> 자바스크립트에서 void(0)은 undefined라서 반환해주는 것 없이 현재 페이지 유지
ex )

<a href='javascript:void(0);'>페이지 이동x</a>

 

href 속성에 '#'을 주는 방법도 페이지 이동을 막아준다 하지만 주소 뒤에 #이 추가 되고 화면 최상단으로 이동하므로 추천하지 않음.

2. preventDefault() 사용하기
->preventDefault 메소드는 이벤트를 취소할때 사용하는 메소드로서 클릭 이벤트를 취소하여 페이지 이동을 막을 수 있습니다.

ex)

a태그를 클릭하면 onClick속성에 정의되어 있는 함수가 실행되고 preventDefault()에 의하여 클릭이벤트가 취소

<a href='javascript:void(0)' id='test' onclick='preventClick(event)'>클릭</a>

function preventClick(e){
	e.preventDefault()
}

 

+ href에 주소값을 지정하지 않는 방법도 가능하지만 주소값을 지정하지 않으면 현재 페이지를 다시 불러 오게 되서 추천하지 않는 방식입니다.