Event#
Event.preventDefault()#
Metoda preventDefault() przerywa wszystkie domyślne akcje związane z danym odwoływalnym zdarzeniem.
Składnia#
Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:
event.preventDefault();
gdzie poszczególne człony oznaczają:
event- zdarzenie będące obiektem kontekstu.
Algorytm wywołania metody preventDefault() nie jest skomplikowany. Dla lepszego zrozumienia tematu prezentuję go w całości:
- Ustaw flagę anulowania dla danego zdarzenia jeśli wartością atrybutu
cancelablejest boolowskietrue.
Odwołanie domyślnych akcji jest możliwe tylko i wyłącznie wtedy, kiedy zdarzenie na to pozwala (nawet przed wysłaniem zdarzenia), co można sprawdzić za pomocą właściwości Event.cancelable. Z kolei właściwość Event.defaultPrevented pozwala ustalić, czy domyślne akcje zostały już odwołane (np. przez innego obserwatora zdarzenia). Wywołanie metody na nieodwoływalnych zdarzeniach nie przynosi żadnego efektu.
Warto podkreślić, że domyślne akcje mogą być wykonywane przed wysłaniem zdarzenia , np. dla właściwości checked w elemencie input. W takiej sytuacji wywołanie metody preventDefault() dodatkowo przywróci stan elementu do wcześniejszych wartości (sprzed wykonania domyślnych akcji).
Metoda preventDefault() nie przerywa propagacji dla danego zdarzenia. Można to osiągnąć poprzez wywołanie metody Event.stopPropagation() lub Event.stopImmediatePropagation() na zdarzeniu.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<script>
// Uruchom po całkowitym załadowaniu dokumentu
window.onload = function(){
var button = document.getElementById("press");
var info = document.getElementById("info");
button.addEventListener("click", function(e){
info.innerHTML += "Interfejs zdarzenia e: " + e // [object MouseEvent]
+ "<br>" + "e.type: " + e.type // click
+ "<br>" + "e.bubbles: " + e.bubbles // true
+ "<br>" + "e.cancelable: " + e.cancelable // true
+ "<br>" + "e.defaultPrevented: " + e.defaultPrevented // false
+ "<br>" + "e.isTrusted: " + e.isTrusted // true
+ "<br>" + "e.eventPhase: " + e.eventPhase // 2
+ "<br>" + "e.timeStamp: " + e.timeStamp // liczba całkowita z wartością zależną od chwili uruchomienia przykładu
+ "<br>" + "e.currentTarget: " + e.currentTarget // [object HTMLInputElement]
+ "<br>" + "e.target: " + e.target; // [object HTMLInputElement]
e.preventDefault();
info.innerHTML += "<br><br>" + "e.defaultPrevented: " + e.defaultPrevented; // true
}, false);
window.addEventListener("click", function(e){
info.innerHTML += "<br><br>" + "Interfejs zdarzenia e: " + e // [object MouseEvent]
+ "<br>" + "e.currentTarget: " + e.currentTarget // [object Window]
+ "<br>" + "e.target: " + e.target // [object HTMLInputElement]
+ "<br>" + "e.timeStamp: " + e.timeStamp; // liczba całkowita z wartością zależną od chwili uruchomienia przykładu
}, false);
}
</script>
</head>
<body>
<p>Kliknij w przycisk by uzyskać szczegółowe informacje dla zdarzenia.</p>
<input id="press" type="button" value="Kliknij mnie!">
<p style="color: blue;">Szczegółowe informacje dla przechwyconego zdarzenia:</p>
<p id="info"></p>
</body>
</html>Wiele implementacji dodatkowo interpretuje zwracane wartości przez uchwyty zdarzeń, jak na przykład boolowska wartość flase oznacza, że domyślne akcje dla odwoływalnych zdarzeń zostaną anulowane (chociaż uchwyty Window.onerror są przerywane poprzez zwrócenie boolowskiej wartości true).
Przerywanie domyślnych akcji powiązanych ze zdarzeniami za pomocą metody preventDefault() jest bardzo często wykorzystywane przez programistów, szczególnie w przypadku formularzy lub odnośników.
Interfejs Web IDL#
void preventDefault();