Jaki jest efekt dodania "return false" do detektora zdarzeń kliknięć?

Różnicę widać na poniższym przykładzie:

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

Kliknięcie "ok" zwraca true, po czym następuje link. Kliknięcie "Anuluj" zwraca false i nie następuje po linku. Jeśli javascript jest wyłączony, link jest wykonywany normalnie.

Oto bardziej rozbudowana procedura anulowania domyślnych zachowań i 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 użycia tego w obsłudze zdarzenia:

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

CO "return false" naprawdę?

Return false faktycznie robi trzy bardzo oddzielne rzeczy, kiedy je nazwiesz:

1. event.preventDefault ();
2. event.stopPropagation ();
3. zatrzymuje wywołanie zwrotne i powraca natychmiast po wywołaniu.

na przykład:

Po kliknięciu tego linku zwróć false will anulowanie domyślnego zachowania przeglądarki.

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

Retuning false Z zdarzenia JavaScript Zwykle anuluje zachowanie "domyślne" - w przypadku linków mówi przeglądarce, aby nie podążała za linkiem.

Wierzę, że to powoduje, że standardowe zdarzenie nie ma miejsca.

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

Return false zatrzyma śledzenie hiperłącza po uruchomieniu javascript. Jest to przydatne w przypadku dyskretnego javascript, który rozkłada się wdzięcznie - na przykład możesz mieć miniaturkę obrazu, która używa javascript, aby otworzyć wyskakujące okienko pełnowymiarowego obrazu. Gdy javascript jest wyłączony lub obraz jest kliknięty środkowym kliknięciem (otwarty na nowej karcie), ignoruje to zdarzenie onClick i po prostu normalnie otwiera obraz jako pełnowymiarowy obraz.

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

Użycie return false w zdarzeniu onclick powoduje, że przeglądarka nie przetwarza pozostałej części stosu wykonawczego, co obejmuje następujące łącze w atrybucie href.

Innymi słowy, dodanie return false wstrzymuje działanie href. W twoim przykładzie, to jest dokładnie to, czego chcesz.

W buttonach nie jest to konieczne, ponieważ onclick jest wszystkim, co kiedykolwiek wykona - nie ma href, aby przetworzyć i przejść do.

Return false mówi, aby nie podejmować domyślnej akcji, która w przypadku {[0] } ma podążać za linkiem. Gdy zwrócisz false do onclick, href zostanie zignorowany.

Przeglądarka hack: http://jszen.blogspot.com/2007/03/return-false-to-prevent-jumping.html

Return false uniemożliwi nawigację. W przeciwnym razie lokalizacja stanie się wartością zwracaną someFunc

return false zapobiega poruszaniu się po stronie i niechcianemu przewijaniu okna na górę lub dół.

onclick="return false"

Dziwię się, że nikt nie wspomniał onmousedown zamiast onclick.

onclick='return false'

Nie wychwytuje domyślnego zachowania przeglądarki skutkującego (czasami niechcianym) zaznaczeniem tekstu dla mousedown, ale

onmousedown='return false'

Robi.

Innymi słowy, kiedy klikam przycisk, jego tekst czasami staje się przypadkowo wybrany, zmieniając wygląd przycisku, co może być niechciane. To jest domyślne zachowanie, któremu staramy się zapobiec. Jednakże, Zdarzenie mousedown jest zarejestrowane przed click, więc jeśli tylko zapobiegniesz temu zachowaniu wewnątrz twojego modułu obsługi click, nie wpłynie to na niechciane zaznaczenie wynikające ze zdarzenia mousedown. Więc tekst nadal zostanie wybrany. Jednak zablokowanie domyślnego zdarzenia mousedown wykona zadanie.

Zobacz też Zdarzenie.preventDefault () vs. return false

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 zmiany na "nowa zawartość".

Ale jeśli usunę "false" z mojego linku, kliknięcie w link nie robi (pozornie) nic. Dlaczego?

Dzieje się tak dlatego, że jeśli nie zwrócę false, domyślne zachowanie kliknięcia linku i wyświetlenia jego strony docelowej nie zostanie anulowane. Ale tutaj href hiperłącza jest "", więc odsyła do tej samej bieżącej strony. Tak więc strona jest skutecznie odświeżona i pozornie nic się nie dzieje.

W tle funkcja setBodyHtml () nadal jest wykonywana. Przypisuje swój argument do ciała.innerHTML. Ale ponieważ strona jest natychmiast odświeżana / przeładowywana zmodyfikowana treść nie pozostaje widoczna dłużej niż kilka milisekund, więc nie będę jej widział.

Ten przykład pokazuje, dlaczego czasami warto używać "return false"

Chcę przypisać jakiś href do linku, aby wyświetlał się jako link, jako podkreślony tekst. Ale nie chcę kliknąć w link, aby skutecznie przeładować stronę. Chcę, aby ta domyślna nawigacja=behavior została anulowana i jakiekolwiek skutki uboczne są spowodowane wywołaniem mojej funkcji do take I stay in effect. Dlatego muszę "wrócić fałszywy".

Powyższy przykład jest czymś, co można szybko wypróbować podczas tworzenia. Do produkcji bardziej prawdopodobne Przypisz obsługę kliknięć w JavaScript i wywołaj preventDefault (). Ale dla szybkiego wypróbowania "return false" powyżej robi sztuczkę.

Podczas korzystania z formularzy, możemy użyć "return false", aby zapobiec wysyłaniu.

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

Domyślnie, po kliknięciu przycisku, formularz będzie wysyłany do serwera bez względu na to, jaką wartość wprowadzasz.

Jednak to zachowanie nie jest odpowiednie w większości przypadków, ponieważ możemy chcieć to sprawdzić przed wysłaniem go na serwer.

Więc, gdy słuchacz otrzymał "false", zgłoszenie zostanie anulowane. Zasadniczo jest to w celu wykonania pewnych kontroli na froncie.