Pourquoi "return false" ne fonctionne pas?

Pourquoi dans le code ci-dessous return false ne fonctionne pas?

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

<a href="/?originalUrl=https%3A%2F%2Ffr.javascript.info%2F%26quot%3Bhttps%3A%2F%2Fw3.org%26quot%3B%2520onclick%3D%26quot%3Bhandler()%26quot%3B%26gt%3Ble%2520navigateur%2520va%2520aller%2520sur%2520w3.org%26lt%3B%2Fa%26gt%3B%253C%2Fcode">

Le navigateur suit le lien lors du clic, mais nous ne voulons pas ça.


Comment réparer ce problème?

Lorsque le navigateur lit l’attribut on*, comme onclick, il créer le gestionnaire depuis son contenu.
Pour onclick="handler()" la fonction sera:

      
        
        
          function(event) {
  handler() // le contenu de onclick
}
        
      
      
      
Maintenant nous pouvons voir que la valeur retournée par handler() n’est pas utilisée et n’affecte pas le résultat.
La correction est simple:

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

<a href="/?originalUrl=https%3A%2F%2Ffr.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">

        

      

      
      
Nous pouvons aussi utiliser event.preventDefault(), comme ceci:


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

<a href="/?originalUrl=https%3A%2F%2Ffr.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">