Return false что это

Действия браузера по умолчанию

Многие события автоматически влекут за собой действие браузера.

• Клик по ссылке инициирует переход на новый URL.
• Нажатие на кнопку «отправить» в форме – отсылку её на сервер.
• Зажатие кнопки мыши над текстом и её движение в таком состоянии – инициирует его выделение.

Если мы обрабатываем событие в JavaScript, то зачастую такое действие браузера нам не нужно. К счастью, его можно отменить.

Отмена действия браузера

Есть два способа отменить действие браузера:

• Основной способ – это воспользоваться объектом event . Для отмены действия браузера существует стандартный метод event.preventDefault() .
• Если же обработчик назначен через on<событие> (не через addEventListener ), то также можно вернуть false из обработчика.

В следующем примере при клике по ссылке переход не произойдёт:

Обычно значение, которое возвращает обработчик события, игнорируется.

Единственное исключение – это return false из обработчика, назначенного через on<событие> .

В других случаях return не нужен, он никак не обрабатывается.

Пример: меню

Рассмотрим меню для сайта, например:

Данный пример при помощи CSS может выглядеть так:

В HTML-разметке все элементы меню являются не кнопками, а ссылками, то есть тегами <a> . В этом подходе есть некоторые преимущества, например:

• Некоторые посетители очень любят сочетание «правый клик – открыть в новом окне». Если мы будем использовать <button> или <span> , то данное сочетание работать не будет.
• Поисковые движки переходят по ссылкам <a href=". "> при индексации.

Поэтому в разметке мы используем <a> . Но нам необходимо обрабатывать клики в JavaScript, а стандартное действие браузера (переход по ссылке) – отменить.

Например, вот так:

Если мы уберём return false , то после выполнения обработчика события браузер выполнит «действие по умолчанию» – переход по адресу из href . А это нам здесь не нужно, мы обрабатываем клик сами.

Кстати, использование здесь делегирования событий делает наше меню очень гибким. Мы можем добавить вложенные списки и стилизовать их с помощью CSS – обработчик не потребует изменений.

Некоторые события естественным образом вытекают друг из друга. Если мы отменим первое событие, то последующие не возникнут.

Например, событие mousedown для поля <input> приводит к фокусировке на нём и запускает событие focus . Если мы отменим событие mousedown , то фокусирования не произойдёт.

В следующем примере попробуйте нажать на первом <input> – происходит событие focus . Но если вы нажимаете по второму элементу, то события focus не будет.

Это потому, что отменено стандартное действие mousedown . Впрочем, фокусировка на элементе всё ещё возможна, если мы будем использовать другой способ. Например, нажатием клавиши Tab можно перейти от первого поля ввода ко второму. Но только не через клик мышью на элемент, это больше не работает.

Опция «passive» для обработчика

Необязательная опция passive: true для addEventListener сигнализирует браузеру, что обработчик не собирается выполнять preventDefault() .

Почему это может быть полезно?

Есть некоторые события, как touchmove на мобильных устройствах (когда пользователь перемещает палец по экрану), которое по умолчанию начинает прокрутку, но мы можем отменить это действие, используя preventDefault() в обработчике.

Поэтому, когда браузер обнаружит такое событие, он должен для начала запустить все обработчики и после, если preventDefault не вызывается нигде, он может начать прокрутку. Это может вызвать ненужные задержки в пользовательском интерфейсе.

Опция passive: true сообщает браузеру, что обработчик не собирается отменять прокрутку. Тогда браузер начинает её немедленно, обеспечивая максимально плавный интерфейс, параллельно обрабатывая событие.

Для некоторых браузеров (Firefox, Chrome) опция passive по умолчанию включена в true для таких событий, как touchstart и touchmove .

event.defaultPrevented

Свойство event.defaultPrevented установлено в true , если действие по умолчанию было предотвращено, и false , если нет.

Рассмотрим практическое применение этого свойства для улучшения архитектуры.

Помните, в главе Всплытие и погружение мы говорили о event.stopPropagation() и упоминали, что останавливать «всплытие» – плохо?

Иногда вместо этого мы можем использовать event.defaultPrevented , чтобы просигналить другим обработчикам, что событие обработано.

Давайте посмотрим практический пример.

По умолчанию браузер при событии contextmenu (клик правой кнопкой мыши) показывает контекстное меню со стандартными опциями. Мы можем отменить событие по умолчанию и показать своё меню, как здесь:

return

Оператор return завершает выполнение текущей функции и возвращает её значение.

Интерактивный пример

Синтаксис

Выражение, значение которого будет возвращено. Если не указано, вместо него возвращается undefined .

Описание

При вызове оператора return в функции её выполнение прекращается. Указанное значение возвращается в место вызова функции. Например, приведённая ниже функция возвращает возведённое в квадрат значение своего аргумента, x (где x – это число):

Если возвращаемое значение не указано, вместо него возвращается undefined .

Следующие выражения всегда прерывают выполнение функции:

Автоматическая расстановка точек с запятыми

На выражение return влияет автоматическая расстановка точек с запятыми (ASI). Разрыв строки не допускается между ключевым словом return и выражением.

трансформируется ASI в:

В консоли появится предупреждение «unreachable code after return statement».

Примечание: Начиная с Gecko 40, предупреждение в консоли появляется, если обнаружен недостижимый код после return .

Для того, чтобы избежать данной проблемы (предотвратить ASI), можно использовать скобки:

Return false что это

Return statements, in programming languages, are used to skip the currently executing function and return to the caller function. Return statements may/may not return any value. Below is the example of a return statement in JavaScript.

Example 1:

These were some of the basic implementations of return false statement in JavaScript. However, there exist some more interesting implementations. Web Developers use ‘return false’ in different ways. During form submission, if a particular entry is unfilled, return false is used to prevent the submission of the form.

Return False in JavaScript

This article will explain JavaScript’s return false statement, the need to use it, and how to use it in JavaScript programs. It will also explain the difference between return false and preventDefault statements.

Please enable JavaScript

Return Statements in JavaScript

JavaScript return statement skips the functions’ executions and return to the caller function. The return statement may or may not return any value.

Following is an example of a simple return statement in JavaScript.

Likewise, we can return true or false in a simple JavaScript function.

Use preventDefault() Method in JavaScript

This method stops the event if it is stoppable, which means the default action that belongs to the event will not occur. It just prevents the default browser behavior.

1. Once you click the link, it will prevent the link from following the URL.
2. If you click on a checkbox, the function will toggle the checkbox.
3. If you click on a Submit button, it will prevent submitting a form.

Use Return False Method in JavaScript

Return false follows the following three steps.

1. It stops the browser’s default behavior.
2. It prevents the event from propagating the DOM.
3. It also stops callback execution and returns immediately.

1. It relies on the boolean (true or false) value. If a form field is empty, the function generates an alert message, which returns false, preventing the form from being submitted.

1. The following example shows that using preventDefault will change the browser’s default behavior.

1. While in the following example, return false stops the event from propagating through the DOM.

So, the use of return causes your code to short-circuit and stop execution immediately, and use the return false statement to prevent something from happening.

When and Why Use return false in JavaScript

1. Return false statement is used to prevent something from happening.
2. When a return false statement is called in a function, the execution of this function is stopped. If specified, a given value is returned to the function caller.
3. In event handlers, like onsubmit , returning false is a way to tell that the event will not fire. So, in the onsubmit case, this would mean that the form is not submitted.

Difference Between return false and preventDefault() in JavaScript

In JavaScript, both return false and preventDefault() are used to stop default browser behavior, but their functionalities and uses are slightly different.

The main difference between these statements is that the code after return false will not execute, while the code after preventDefault() will execute.