Sty
24
2015

preventDefault(), a return false;

Podczas pisania skryptów czasami potrzebujemy przerwać wykonywanie się funkcji bądź zatrzymać określoną domyślną akcję w przeglądarce. Posłużmy się przykładem kliknięciem na znacznik <a>, który zawiera w sobie atrybut href znany jako anchor tag. Semantyka języka HTML mówi o stosowaniu „#” lub „javascript:void(0)” do znacznika <a>, który ma być później używany jako selektor np. przy przypisywaniu określonego zdarzenia w jQuery. Najpierw zobaczmy to na czystym HTMLu, na którym to zbudujemy przycisk.


 

Przycisk ten odpowiednio oskryptujemy, tworząc zdarzenie, które będzie wywoływało funkcje po naciśnięciu przycisku.

 

var dodawanieproduktu = function(e) {
    alert("Dodano do koszyka");
}

$(document).ready(function() {

    $("#dodajProdukt").on("click", dodawanieproduktu);
});

Umieszczając # w atrybucie href znacznika <a> musimy się z tym liczyć, że przeglądarka potraktuje nasz link jako kotwicę i wykona się domyślna akcja przeglądarki po kliknięciu w ten przycisk – w naszym przypadku będzie to odesłanie do początku strony. Aby domyślna akcja nie została wykonana możemy posłużyć się dwoma rozwiązaniami:

1. Zastosować metodę preventDefault() wywołanego obiektu Event będzie to na przykład: e.preventDefault();

 

var dodawanieproduktu = function(e) {
    alert("Dodano do koszyka");
    e.preventDefault();
   // możliwe dalsze działanie funkcji
}

$(document).ready(function() {

    $("#dodajProdukt").on("click", dodawanieproduktu);
});

W ten sposób kotwica nie zadziała, pojawi się tylko alert() i zablokuje domyślną akcję przeglądarki.
Warto zauważyć, że możemy umieścić jakiś kod do wykonania pod wywołaniem w/w metody.

2. Jeśli chcemy zakończyć działanie funkcji dodawanieproduktu zaraz po wyświetleniu alertu – wystarczy, że umieścimy return false; w kolejnej linijce po alercie. Funkcja wyświetli tylko alert i skończy działanie.

 

var dodawanieproduktu = function(e) {
    alert("Dodano do koszyka");
    return false; //przerywa działanie funkcji
}

$(document).ready(function() {

    $("#dodajProdukt").on("click", dodawanieproduktu);
});

Przy okazji omawiania warto wspomnieć o kolejnej metodzie obiektu Event brzmi ona stopPropagation() o której możesz przeczytać w tym wpisie.

Powiązane wpisy

Autor wpisu:

Jakub Kądzielawa - młodszy programista PHP, student Informatyki, który łączy pracę ze swoją pasją. Czasami narzeka na brak wolnego czasu.

Zostaw komentarz