왜 'return false'가 작동하지 않을까요

아래의 코드에서 return false는 왜 전혀 작동하지 않을까요?

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

<a href="/?originalUrl=https%3A%2F%2Fko.javascript.info%2F%26quot%3Bhttps%3A%2F%2Fw3.org%26quot%3B%2520onclick%3D%26quot%3Bhandler()%26quot%3B%26gt%3B%25EB%25B8%258C%25EB%259D%25BC%25EC%259A%25B0%25EC%25A0%2580%25EA%25B0%2580%2520w3.org%25EB%25A1%259C%2520%25EC%259D%25B4%25EB%258F%2599%25ED%2595%25A9%25EB%258B%2588%25EB%258B%25A4.%26lt%3B%2Fa%26gt%3B%253C%2Fcode">

브라우저에서 링크를 클릭하면 해당 URL로 이동하는데, 이 기본동작을 취소하고 싶다고 해봅시다.


어떻게 코드를 수정하면 될까요?

브라우저는 onclick 같은 on* 속성을 읽을 때, 속성값을 그대로 가져와 핸들러를 생성합니다.
따라서 onclick="handler()"의 경우 생성되는 핸들러 함수는 다음과 같습니다.

      
        
        
          function(event) {
  handler() // onclick 속성에 할당된 값이 그대로 핸들러 함수 본문이 됩니다.
}
        
      
      
      
그런데 여기서 보면 함수 handler를 괄호를 붙여서 호출하기만 했지, 호출시 반환된 값은 그 어디에서도 사용하지 않고 있습니다. 따라서 아무런 변화가 없습니다.
우리가 원하는 대로 링크로 이동하지 않게 하려면 다음과 같이 코드를 수정하면 됩니다.

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

<a href="/?originalUrl=https%3A%2F%2Fko.javascript.info%2F%26quot%3Bhttps%3A%2F%2Fw3.org%26quot%3B%2520onclick%3D%26quot%3Breturn%2520handler()%26quot%3B%26gt%3Bw3.org%26lt%3B%2Fa%26gt%3B%253C%2Fcode">

        

      

      
      
이 외에도 event.preventDefault()를 사용할 수 있습니다.


      
        
        
          
            
          
          
            
          
        
        
          <script>
  function handler(event) {
    alert("...");
    event.preventDefault();
  }
</script>

<a href="/?originalUrl=https%3A%2F%2Fko.javascript.info%2F%26quot%3Bhttps%3A%2F%2Fw3.org%26quot%3B%2520onclick%3D%26quot%3Bhandler(event)%26quot%3B%26gt%3Bw3.org%26lt%3B%2Fa%26gt%3B%253C%2Fcode">