Каков эффект добавления 'return false' в прослушиватель событий щелчка?
Много раз я видел такие ссылки на страницах HTML:
<a href='#' onclick='someFunc(3.1415926); return false;'>Click here !</a>
Каков эффект от return false там?
Кроме того, я обычно не вижу этого в кнопках.
Это указано где-нибудь? В какой спецификации в w3.org?
13 ответов
Возвращаемое значение обработчика события определяет, должно ли происходить поведение браузера по умолчанию. В случае нажатия на ссылки, это будет следовать по ссылке, но разница наиболее заметна в обработчиках отправки формы, где вы можете отменить отправку формы, если пользователь допустил ошибку при вводе информации.
Я не верю, что для этого есть спецификация W3C. Все древние интерфейсы JavaScript, подобные этому, получили прозвище "DOM 0" и в основном не определены. Возможно, вам повезет, прочитав старую документацию Netscape 2.
Современный способ достижения этого эффекта заключается в event.preventDefault()и это указано в спецификации DOM 2 Events.
Вы можете увидеть разницу в следующем примере:
<a href="http://www.google.co.uk/" onclick="return (confirm('Follow this link?'))">Google</a>
Нажатие "Okay" возвращает true, и ссылка идет. Нажатие "Отмена" возвращает false и не переходит по ссылке. Если JavaScript отключен, ссылка идет в обычном режиме.
ЧТО ДЕЙСТВИТЕЛЬНО ДЕЛАЕТ "вернуть ложь"?
return false фактически делает три совершенно разные вещи, когда вы называете это:
- event.preventDefault ();
- event.stopPropagation ();
- Останавливает выполнение обратного вызова и немедленно возвращается при вызове.
Посмотрите http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/ для получения дополнительной информации.
Например:
при нажатии на эту ссылку возврат false отменяет поведение браузера по умолчанию.
<a href='#' onclick='someFunc(3.1415926); return false;'>Click here !</a>
Вот более надежная процедура для отмены поведения по умолчанию и всплытия событий во всех браузерах:
// 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);
}
Возврат false из события JavaScript обычно отменяет поведение "по умолчанию" - в случае ссылок он говорит браузеру не переходить по ссылке.
Возвращение false остановит гиперссылку после запуска JavaScript. Это полезно для ненавязчивого javascript, который изящно ухудшается - например, у вас может быть уменьшенное изображение, которое использует javascript, чтобы открыть всплывающее окно полноразмерного изображения. Когда javascript выключен или изображение щелкнуто по среднему значению (открывается на новой вкладке), это игнорирует событие onClick и просто открывает изображение как полноразмерное изображение в обычном режиме.
Если return false не было указано, изображение будет запускать всплывающее окно и открывать изображение как обычно. Некоторые люди вместо использования false возвращают использование javascript в качестве атрибута href, но это означает, что когда javascript отключен, ссылка ничего не будет делать.
Я считаю, что стандартное событие не происходит.
В вашем примере браузер не будет пытаться перейти на #.
Использование return false в событии onclick останавливает браузер от обработки остальной части стека выполнения, что включает переход по ссылке в атрибуте href.
Другими словами, добавление return false останавливает работу href. В вашем примере это именно то, что вы хотите.
В кнопках это не нужно, потому что onclick - это все, что он когда-либо будет выполнять - нет необходимости обрабатывать и переходить к href.
Возвращаемое значение false говорит, что не предпринимать действия по умолчанию, что в случае <a href> это перейти по ссылке. Когда вы вернете false в onclick, то href будет игнорироваться.
Я удивлен, что никто не упомянул onmousedown вместо onclick,
onclick='return false'
не улавливает поведение браузера по умолчанию, в результате чего (иногда нежелательный) выбор текста происходит для mousedown но
onmousedown='return false'
делает.
Другими словами, когда я нажимаю на кнопку, ее текст иногда выбирается случайно, изменяя внешний вид кнопки, что может быть нежелательным. Это поведение по умолчанию, которое мы пытаемся здесь предотвратить. Тем не менее mousedown событие зарегистрировано раньше clickтак что если вы только предотвратите это поведение внутри click обработчик, это не повлияет на нежелательный выбор, возникающий из mousedown событие. Таким образом, текст по-прежнему выбирается. Однако предотвращение дефолта для mousedown событие сделает работу.
Смотрите также event.preventDefault() против return false
Возврат false будет препятствовать навигации. В противном случае местоположение станет возвращаемым значением someFunc.
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", отправка будет отменена. По сути, это делается для того, чтобы проверить внешний вид.