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

Много раз я видел такие ссылки на страницах HTML:

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

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

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

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

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

Я не верю, что для этого есть спецификация 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>

Нажатие «Хорошо» возвращает true, и ссылка идет. Нажатие «Отмена» возвращает false и не переходит по ссылке. Если JavaScript отключен, ссылка идет в обычном режиме.

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

// 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 фактически делает три совершенно разные вещи, когда вы называете это:

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

Посмотрите jquery-events-stop-misusing-return-false для получения дополнительной информации.

Например :

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

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

Возврат 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 будет игнорироваться.

Взлом браузера: http://jszen.blogspot.com/2007/03/return-false-to-prevent-jumping.html

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

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

onclick="return false"

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

onclick='return false'

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

onmousedown='return false'

делает.

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

Смотрите также event.preventDefault () против 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 ссылке, чтобы она отображалась в виде ссылки в виде подчеркнутого текста. Но я не хочу, чтобы клик по ссылке просто перезагружал страницу. Я хочу, чтобы навигация по умолчанию = поведение было отменено, и любые побочные эффекты вызваны вызовом моей функции для принятия и сохранения в силе. Поэтому я должен «вернуть ложь».

Пример выше - это то, что вы бы быстро опробовали во время разработки. Для производства вы, скорее всего, назначите обработчик кликов в JavaScript и вместо этого вызовете protectDefault (). Но для быстрого опробования «возвращаемое ложное» выше делает свое дело.

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

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