вернуться к уроку

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

важность: 3

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

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

<a href="/?originalUrl=https%3A%2F%2Flearn.javascript.ru%2F%26quot%3Bhttps%3A%2F%2Fw3.org%26quot%3B%2520onclick%3D%26quot%3Bhandler()%26quot%3B%26gt%3B%25D0%25B1%25D1%2580%25D0%25B0%25D1%2583%25D0%25B7%25D0%25B5%25D1%2580%2520%25D0%25BE%25D1%2582%25D0%25BA%25D1%2580%25D0%25BE%25D0%25B5%25D1%2582%2520w3.org%26lt%3B%2Fa%26gt%3B%253C%2Fcode">

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

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

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

Функция для onclick="handler()" будет:

function(event) {
  handler() // содержимое onclick
}

Сейчас нам видно, что возвращаемое значение handler() не используется и не влияет на результат.

Исправить очень просто:

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

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