Jaki jest efekt dodania „return false” do detektora zdarzeń kliknięcia?

359

Wiele razy widziałem takie linki na stronach HTML:

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

Jaki jest tam efekt return false?

Poza tym zwykle nie widzę tego w przyciskach.

Czy jest to określone gdziekolwiek? W niektórych specyfikacjach w3.org?

Leonel
źródło
5
Praktyczny problem w przykładzie Leonela polega na tym, że jeśli bieżąca strona zostanie przewinięta w dół, przeskoczy na górę bez zwracanej wartości false;
roenving
Mój IntelliJ skarży się na „return false;” z komunikatem „definicja funkcji zewnętrznej”
ses

Odpowiedzi:

310

Wartość zwracana przez moduł obsługi zdarzeń określa, czy powinno również zachodzić domyślne zachowanie przeglądarki. W przypadku klikania linków byłoby to podążanie za linkiem, ale różnica jest najbardziej zauważalna w procedurach obsługi przesyłania formularzy, w których można anulować przesłanie formularza, jeśli użytkownik popełnił błąd podczas wprowadzania informacji.

Nie wierzę, że istnieje specyfikacja W3C. Wszystkie starożytne interfejsy JavaScript, takie jak ten, otrzymały pseudonim „DOM 0” i są w większości nieokreślone. Możesz mieć trochę szczęścia, czytając starą dokumentację Netscape 2.

Współczesnym sposobem osiągnięcia tego efektu jest wywołanie event.preventDefault(), a jest to określone w specyfikacji zdarzeń DOM 2 .

Jim
źródło
41
event.preventDefault ? event.preventDefault() : event.returnValue = false;będzie działać również w IE
3
Każda przeglądarka oprócz Chrome działała z tą return falsemetodą, ale potrzebowałemevent.preventDefault Chrome.
DOOManiac
3
Chrome działa return falseteraz z tą metodą. Przestaje podążać za linkiem w zdarzeniu onclick elementu img.
Bao
W prostym formularzu JS moduł obsługi przesyłania zwracający wartość false nie działa (przynajmniej w Chrome), więc używam e.preventDefault (). zgodnie z komentarzem @ 2astalavista powyżej e.preventDefault kończy się niepowodzeniem w IE, więc użyj jego metody: event.preventDefault? event.preventDefault (): event.returnValue = false;
luigi7up
162

Różnicę możesz zobaczyć w następującym przykładzie:

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

Kliknięcie przycisku „OK” zwraca wartość true i następuje przejście do linku. Kliknięcie „Anuluj” zwraca wartość false i nie powoduje kliknięcia linku. Jeśli javascript jest wyłączony, link jest podążany normalnie.

HoboBen
źródło
7
Dokładnie to, czego szukałem, działa również idealnie na przyciskach przesyłania! <button type="submit" onclick="return confirm('Do you really want to delete this?');">Delete</button>
ArendE
27

Oto bardziej niezawodna procedura anulowania domyślnego zachowania i propagacji zdarzeń we wszystkich przeglądarkach:

// 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;
}

Przykład zastosowania tego w procedurze obsługi zdarzeń:

// 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);
}
Herb Caudill
źródło
Podkładka jest fajna, ale na czym polega praktyczna przewaga return false;? Odpowiedź Kamesha dotyczy tego trochę, ale skoro istnieje szansa, że ​​twój shim zrobi jedno lub drugie, w jaki sposób te oddzielne wyniki spowodują tabstripLinkElement_clickzmianę operacji z przeglądarki na przeglądarkę? Jeśli nie ma różnicy operacyjnej, dlaczego (w praktyce) przeszkadza (nawet jeśli teoretycznie jest to właściwa rzecz)? Dzięki i AIA za zombie odpowiedź na pytanie.
ruffin
7
Pierwszy blok kodu ma końcowy else. Okropny styl kodowania. Dodaj kilka nawiasów klamrowych, aby nie było dwuznaczne.
mbomb007
23

CO NAPRAWDĘ ROBI „zwrot fałszywy” ?

return false faktycznie robi trzy bardzo różne rzeczy, gdy go nazwiesz:

  1. event.preventDefault ();
  2. event.stopPropagation ();
  3. Zatrzymuje wykonanie wywołania zwrotnego i natychmiast wraca po wywołaniu.

Aby uzyskać więcej informacji, zobacz jquery-events-stop-misusing-return-false .

Na przykład :

kliknięcie tego linku powoduje zwrócenie wartości false, aby anulować domyślne zachowanie przeglądarki .

<a href='#' onclick='someFunc(3.1415926); return false;'>Click here !</a>
kamesh
źródło
7
onclick = „return false” to nie to samo, co zwracanie false z procedury obsługi zdarzenia kliknięcia jQuery. Przeglądarki zapobiegają tylko domyślnemu programowi obsługi (np. e.preventDefault()), Ale nie zatrzymują propagacji. Patrz: jsfiddle.net/18yq1783
Jamie Treworgy,
1
Fwiw, link do bloga jest zepsuty atm. Archiwum jest tutaj .
ruffin
16

Ponowne ustawienie fałszywego zdarzenia JavaScript zwykle anuluje zachowanie „domyślne” - w przypadku linków informuje przeglądarkę, aby nie podążała za linkiem.

Neall
źródło
5
"zazwyczaj"? więc nie zawsze?
Maria Ines Parnisari
12

Uważam, że powoduje to, że standardowe zdarzenie się nie wydarzy.

W twoim przykładzie przeglądarka nie będzie próbowała przejść do #.

Guvante
źródło
12

Zwróć false, aby zatrzymać śledzenie hiperłącza po uruchomieniu javascript. Jest to przydatne w przypadku dyskretnego javascript, który degraduje się z wdziękiem - na przykład możesz mieć miniaturę, która używa javascript do otwierania wyskakującego obrazu w pełnym rozmiarze. Gdy javascript jest wyłączony lub obraz jest klikany środkowym przyciskiem (otwierany w nowej karcie), ignoruje to zdarzenie onClick i po prostu otwiera obraz jako pełnowymiarowy obraz.

Jeśli nie podano return false, obraz uruchomi wyskakujące okienko i otworzy obraz normalnie. Niektóre osoby zamiast używać zwracanej wartości false używają javascript jako atrybutu href, ale to oznacza, że ​​gdy javascript jest wyłączony, link nic nie robi.

HoboBen
źródło
7

użycie return false w zdarzeniu onclick powoduje, że przeglądarka nie przetwarza reszty stosu wykonania, co obejmuje śledzenie łącza w atrybucie href.

Innymi słowy, dodanie wartości false powoduje, że href nie działa. W twoim przykładzie jest to dokładnie to, czego chcesz.

W przyciskach nie jest to konieczne, ponieważ onclick to wszystko, co kiedykolwiek wykona - nie ma hrefu do przetworzenia i przejścia do.

piksel
źródło
6

Zwracana wartość false oznacza, że ​​nie należy podejmować domyślnej akcji, która w przypadku an <a href>oznacza podążanie za linkiem. Gdy zwrócisz false do kliknięcia, href zostanie zignorowany.

Stephenbayer
źródło
3

Zwróć false uniemożliwi nawigację. W przeciwnym razie lokalizacja stałaby się wartością zwracaną someFunc

ncgz
źródło
nie, lokalizacja stanie się zawartością atrybutu href
Chris Marasti-Georg
Lokalizacja staje się wartością zwracaną przez someFunc tylko wtedy, gdy jest to href = "javascript: someFunc ()", nie dotyczy to programów obsługi zdarzeń.
Jim
3

W return falsezapobiega strony przed nawigacji i niepożądany przewijanie okna do góry lub na dół.

onclick="return false"
Shivakrishna
źródło
3

Dziwię się, że nikt nie wspomniał onmousedownzamiast onclick. The

onclick='return false'

nie wychwytuje domyślnego zachowania przeglądarki, co powoduje (czasem niechciane) zaznaczanie tekstu, mousedownale

onmousedown='return false'

robi.

Innymi słowy, kiedy klikam przycisk, jego tekst czasami zostaje przypadkowo wybrany, zmieniając wygląd przycisku, co może być niepożądane. To jest domyślne zachowanie, któremu tutaj próbujemy zapobiec. Jednak mousedownzdarzenie jest rejestrowane wcześniej click, więc jeśli tylko zapobiegniesz temu zachowaniu w clickmodule obsługi, nie wpłynie to na niechciany wybór wynikający ze mousedownzdarzenia. Tak więc tekst jest nadal zaznaczany. Jednak zapobieganie domyślnemu ustawieniumousedown zdarzeniu wykona zadanie.

Zobacz także event.preventDefault () vs. return false

Dmitri Zaitsev
źródło
@FrederikKrautwald Masz rację, to było tajemnicze i powinienem powiedzieć „wybranie”, a nie zaznaczenie. Próbowałem napisać to jaśniej, mam nadzieję, że to będzie bardziej sensowne.
Dmitri Zaitsev
0

Mam ten link na mojej stronie HTML:

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

Funkcja setBodyHtml () jest zdefiniowana jako:

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

Po kliknięciu linku link znika, a tekst wyświetlany w przeglądarce zmienia się na „nową treść”.

Ale jeśli usunę „fałsz” z mojego linku, kliknięcie linku (pozornie) nic nie robi. Dlaczego?

Dzieje się tak dlatego, że jeśli nie zwrócę wartości false, domyślne zachowanie kliknięcia łącza i wyświetlenia strony docelowej nie zostanie anulowane. ALE tutaj href hiperłącza to „”, więc łączy się z powrotem z tą samą stroną. Tak więc strona jest właśnie odświeżana i na pozór nic się nie dzieje.

W tle nadal działa funkcja setBodyHtml (). Przypisuje swój argument do body.innerHTML. Ponieważ jednak strona jest natychmiast odświeżana / ponownie ładowana, zmodyfikowana treść nie jest widoczna dłużej niż przez kilka milisekund, więc jej nie zobaczę.

Ten przykład pokazuje, dlaczego czasami użyteczne jest użycie „return false”.

Chcę przypisać NIEKTÓRE href do linku, aby wyświetlał się jako link, jak podkreślony tekst. Ale nie chcę, aby kliknięcie linku skutecznie po prostu ponownie ładowało stronę. Chcę, aby ta domyślna nawigacja = zachowanie została anulowana, a wszelkie skutki uboczne są wywoływane przez wywołanie mojej funkcji w celu włączenia i pozostania w mocy. Dlatego muszę „zwrócić fałsz”.

Powyższy przykład to coś, co szybko wypróbujesz podczas programowania. W przypadku produkcji bardziej prawdopodobne jest przypisanie modułu obsługi kliknięć w JavaScript i wywołanie metody preventDefault (). Ale w przypadku szybkiego wypróbowania powyższe „powrót fałszu” załatwia sprawę.

Panu Logic
źródło
0

Podczas korzystania z formularzy możemy użyć opcji „return false”, aby zapobiec przesłaniu.

function checkForm() {
    // return true to submit, return false to prevent submitting
}
<form onsubmit="return checkForm()">
    ...
</form>
Allan
źródło