назад до уроку

Чому "return false" не працює?

важливість: 3

Чому в коді нижче return false взагалі не працює?

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

<a href="https://w3.org" onclick="handler()">браузер перейде на w3.org</a>

Браузер переходить за URL-адресою після кліку, але нам це не потрібно.

Як це виправити?

Коли браузер зчитує атрибут 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>