Почему не работает return false?

важность: 3

Почему в коде ниже return false не работает?

<script>
 function handler() {
 alert( "..." );
 return false;
 }
</script>
<a href="https://w3.org" onclick="handler()">браузер откроет w3.org</a>

Браузер переходит по указанной ссылке, но нам этого не нужно.

Как поправить?

Когда браузер считывает атрибут on*, например onclick, он создаёт функцию-обработчик с содержимым этого атрибута в качестве тела функции.

Функция для 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>