GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing ko.javascript.info — 왜 'return false'가 작동하지 않을까요

왜 '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>

You are visitor 01402520 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.