왜 'return false'가 작동하지 않을까요
중요도: 3
아래의 코드에서 return false는 왜 전혀 작동하지 않을까요?
<script>
function handler() {
alert( "..." );
return false;
}
</script>
<a href="https://w3.org" onclick="handler()">브라우저가 w3.org로 이동합니다.</a>브라우저에서 링크를 클릭하면 해당 URL로 이동하는데, 이 기본동작을 취소하고 싶다고 해봅시다.
어떻게 코드를 수정하면 될까요?
브라우저는 onclick 같은 on* 속성을 읽을 때, 속성값을 그대로 가져와 핸들러를 생성합니다.
따라서 onclick="handler()"의 경우 생성되는 핸들러 함수는 다음과 같습니다.
function(event) {
handler() // onclick 속성에 할당된 값이 그대로 핸들러 함수 본문이 됩니다.
}그런데 여기서 보면 함수 handler를 괄호를 붙여서 호출하기만 했지, 호출시 반환된 값은 그 어디에서도 사용하지 않고 있습니다. 따라서 아무런 변화가 없습니다.
우리가 원하는 대로 링크로 이동하지 않게 하려면 다음과 같이 코드를 수정하면 됩니다.
<script>
function handler() {
alert("...");
return false;
}
</script>
<a href="https://w3.org" onclick="return handler()">w3.org</a>이 외에도 event.preventDefault()를 사용할 수 있습니다.
<script>
function handler(event) {
alert("...");
event.preventDefault();
}
</script>
<a href="https://w3.org" onclick="handler(event)">w3.org</a>