Каков эффект добавления «return false» в прослушиватель событий щелчка?

Я много раз видел такие ссылки на HTML-страницах:

<a href='#' onclick='someFunc(3.1415926); return false;'>Click here !</a>

Какой там эффект от return false?

Кроме того, я обычно не вижу этого в кнопках.

Это где-нибудь указано? В какой-то спецификации в w3.org?

И практическая проблема в примере Леонела заключается в том, что если текущая страница прокручивается каким-либо образом вниз, она перескакивает наверх без возврата false;

roenving 29.09.2008 05:20

Мой IntelliJ жалуется на "return false;" с сообщением "определение внешней функции"

ses 12.09.2013 05:34
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
373
2
452 499
16
Перейти к ответу Данный вопрос помечен как решенный

Ответы 16

Я считаю, что это приводит к тому, что стандартное событие не происходит.

В вашем примере браузер не будет пытаться перейти к #.

Возврат false из события JavaScript обычно отменяет поведение «по умолчанию» - в случае ссылок он говорит браузеру не переходить по ссылке.

"как правило"? так не всегда?

Maria Ines Parnisari 29.07.2015 19:02

Возврат false предотвратит навигацию. В противном случае местоположение стало бы возвращаемым значением someFunc.

нет, местоположение станет содержимым атрибута href

Chris Marasti-Georg 24.09.2008 22:36

Местоположение становится возвращаемым значением someFunc, только если оно href = "javascript: someFunc ()", это не относится к обработчикам событий.

Jim 24.09.2008 22:49

Возвращаемое значение false говорит о том, что не следует предпринимать действий по умолчанию, которые в случае <a href> заключаются в переходе по ссылке. Когда вы вернете false в onclick, тогда href будет проигнорирован.

использование return false в событии onclick останавливает обработку браузером остальной части стека выполнения, включая переход по ссылке в атрибуте href.

Другими словами, добавление return false останавливает работу href. В вашем примере это именно то, что вам нужно.

В кнопках это не обязательно, потому что onclick - это все, что он когда-либо выполняет - нет href для обработки и перехода.

Возврат false остановит переход по гиперссылке после запуска javascript. Это полезно для ненавязчивого javascript, который постепенно ухудшается - например, у вас может быть эскизное изображение, которое использует javascript для открытия всплывающего окна с полноразмерным изображением. Когда javascript отключен или изображение щелкнуто средней кнопкой мыши (открыто в новой вкладке), это игнорирует событие onClick и обычно просто открывает изображение как полноразмерное изображение.

Если не было указано return false, изображение будет одновременно запускать всплывающее окно и открывать изображение в обычном режиме. Некоторые люди вместо использования return false используют javascript в качестве атрибута href, но это означает, что, когда javascript отключен, ссылка ничего не сделает.

Ответ принят как подходящий

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

Я не верю, что для этого есть спецификация W3C. Все древние интерфейсы JavaScript, подобные этому, получили прозвище «DOM 0» и в большинстве случаев не определены. Возможно, вам повезет с чтением старой документации Netscape 2.

Современный способ достижения этого эффекта - вызвать event.preventDefault(), и это указано в спецификация событий DOM 2.

event.preventDefault ? event.preventDefault() : event.returnValue = false; будет работать и в IE

user669677 11.06.2012 17:06

Все браузеры, кроме Chrome, работали с методом return false, но мне нужен event.preventDefault для Chrome.

DOOManiac 09.01.2013 19:15

Chrome теперь работает с методом return false. Он перестает переходить по ссылке в событии onclick элемента img.

Bao 17.03.2013 04:58

В простой форме JS обработчик отправки, возвращающий false, не работает (по крайней мере, в Chrome), поэтому я использую e.preventDefault (). согласно комментарию @ 2astalavista выше, e.preventDefault не работает в IE, поэтому используйте его метод: event.preventDefault? event.preventDefault (): event.returnValue = false;

luigi7up 25.11.2014 12:48

Вот более надежная процедура отмены поведения по умолчанию и всплытия событий во всех браузерах:

// Prevents event bubble up or any usage after this is called.
eventCancel = function (e)
{
    if (!e)
        if (window.event) e = window.event;
        else return;
    if (e.cancelBubble != null) e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
    if (e.preventDefault) e.preventDefault();
    if (window.event) e.returnValue = false;
    if (e.cancel != null) e.cancel = true;
}

Пример того, как это будет использоваться в обработчике событий:

// Handles the click event for each tab
Tabstrip.tabstripLinkElement_click = function (evt, context) 
{
    // Find the tabStrip element (we know it's the parent element of this link)
    var tabstripElement = this.parentNode;
    Tabstrip.showTabByLink(tabstripElement, this);
    return eventCancel(evt);
}

Прокладка - это хорошо, но в чем практическое преимущество перед return false;? ответ Камеша немного справляется с этим, но, поскольку есть вероятность, что ваша прокладка выполняет одно или другое, как эти отдельные результаты заставят tabstripLinkElement_click изменить операцию от браузера к браузеру? Если нет операционной разницы, зачем (на практике) беспокоиться (даже если теоретически это то, что нужно делать)? Спасибо и AIA за вопрос с зомби-ответом.

ruffin 30.03.2017 20:05

В конце первого блока кода стоит else. Ужасный стиль кодирования. Добавьте фигурные скобки, чтобы не было двусмысленности.

mbomb007 12.07.2017 17:15

@DonaldDuck Вы уверены, что насчет этого пробела? Если я попробую if (false) if (true) console.info('true'); else console.info('false1');, я получу undefined, а не false1. Если я добавлю еще одну строку: if (false) if (true) console.info('true'); else console.info('false1'); else console.info('false2');, я получу false2. То есть остальное в else return, я думаю, принадлежит if (window.event).

ruffin 18.01.2021 18:57

Вы можете увидеть разницу в следующем примере:

<a href = "http://www.google.co.uk/" onclick = "return (confirm('Follow this link?'))">Google</a>

Нажатие «ОК» возвращает истину, и переход по ссылке. Нажатие на «Отмена» возвращает false и переход по ссылке не выполняется. Если javascript отключен, переход по ссылке выполняется нормально.

Именно то, что я искал, отлично работает и с кнопками отправки! <button type = "submit" onclick = "return confirm('Do you really want to delete this?');">Delete</button>

ArendE 24.11.2013 06:05

Я удивлен, что никто не упомянул onmousedown вместо onclick. В

onclick='return false'

не улавливает поведение браузера по умолчанию, приводящее к (иногда нежелательному) выделению текста для mousedown, но

onmousedown='return false'

делает.

Другими словами, когда я нажимаю кнопку, ее текст иногда выбирается случайно, меняя внешний вид кнопки, что может быть нежелательным. Это поведение по умолчанию, которое мы здесь пытаемся предотвратить. Однако событие mousedown регистрируется до click, поэтому, если вы предотвратите такое поведение только внутри обработчика click, оно не повлияет на нежелательный выбор, возникающий из события mousedown. Так что текст по-прежнему выделяется. Однако предотвращение дефолта для события mousedown выполнит свою работу.

См. Также event.preventDefault () против возврата false

@FrederikKrautwald Вы правы, это было загадочно, и я должен был сказать «выбор», а не «маркировка». Я попытался изложить это более ясно, надеюсь, в этом есть больше смысла.

Dmitri Zaitsev 24.12.2016 05:15

ЧТО ДЕЙСТВИТЕЛЬНО ДЕЛАЕТ "вернуть ложь"?

return false на самом деле делает три очень разных вещи, когда вы его называете:

  1. event.preventDefault ();
  2. event.stopPropagation ();
  3. Останавливает выполнение обратного вызова и немедленно возвращается при вызове.

См. jQuery-события-стоп-неправильное использование-возврат-ложь для получения дополнительной информации.

Например :

при нажатии на эту ссылку вернет false будет отменить поведение браузера по умолчанию.

<a href='#' onclick='someFunc(3.1415926); return false;'>Click here !</a>

onclick = "return false" - это нет, то же самое, что и возврат false из обработчика события клика jQuery. Браузеры только предотвращают использование обработчика по умолчанию (например, e.preventDefault()), но не останавливают распространение. См .: jsfiddle.net/18yq1783

Jamie Treworgy 09.12.2014 21:42

Fwiw, ссылка на блог битая atm. Файл архив здесь.

ruffin 30.03.2017 20:01
Вот ссылка to the blog post that works, at least at present.
JohnK 05.10.2020 17:53

return false предотвращает навигацию по странице и нежелательную прокрутку окна вверх или вниз.

onclick = "return false"

У меня есть эта ссылка на моей HTML-странице:

<a href = "" 
onclick = "setBodyHtml ('new content'); return false; "
> click here </a>

Функция setBodyHtml () определяется как:

function setBodyHtml (s)
{ document.body.innerHTML = s;
}

Когда я нажимаю ссылку, ссылка исчезает и текст отображается в браузере. меняется на «новое содержание».

Но если я уберу «ложь» из своей ссылки, щелчок по ссылке (по-видимому) ничего не сделает. Это почему?

Это потому, что, если я не верну false, поведение по умолчанию, когда происходит щелчок по ссылке и отображается ее целевая страница, не отменяется. НО, здесь href гиперссылки - "", так что она ссылается на ТОЧНУЮ текущую страницу. Таким образом, страница фактически просто обновляется, и, похоже, ничего не происходит.

В фоновом режиме функция setBodyHtml () все еще выполняется. Он присваивает свой аргумент body.innerHTML. Но поскольку страница немедленно обновляется / перезагружается, измененное содержимое тела не остается видимым более чем на несколько миллисекунд, поэтому я его не увижу.

Этот пример показывает, почему иногда ПОЛЕЗНО использовать return false.

Я хочу назначить НЕКОТОРЫЙ href ссылке, чтобы она отображалась как ссылка в виде подчеркнутого текста. Но я не хочу, чтобы щелчок по ссылке просто перезагрузил страницу. Я хочу, чтобы это поведение по умолчанию navigation = было отменено и все побочные эффекты вызывались вызовом моей функции, чтобы она продолжала действовать. Поэтому я должен «вернуть ложь».

Приведенный выше пример - это то, что вы бы быстро попробовали во время разработки. Для производства вы, скорее всего, назначите обработчик кликов в JavaScript и вместо этого вызовете preventDefault (). Но для быстрой проверки вышеприведенное "return false" делает свое дело.

При использовании форм , мы можем использовать return false, чтобы предотвратить отправку.

function checkForm() {
    // return true to submit, return false to prevent submitting
}
<form onsubmit = "return checkForm()">
    ...
</form>

По умолчанию, когда вы нажимаете кнопку, форма отправляется на сервер независимо от того, какое значение вы ввели.

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

Итак, когда слушатель получил "false", отправка будет отменена. По сути, это делается для того, чтобы проверить внешний вид.

Другие вопросы по теме