Event#
Event.cancelable#
Właściwość cancelable zwraca boolowską wartość true jeśli domyślne akcje dla danego zdarzenie mogą zostać odwołane, w przeciwnym razie zwrócona zostanie wartość false. Właściwość jest tylko do odczytu.
Składnia#
Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:
var cancel = event.cancelable;
gdzie poszczególne człony oznaczają:
cancel- boolowskietruelubfalse.event- zdarzenie będące obiektem kontekstu.
Przy tworzeniu zdarzenia wartością domyślną dla właściwości cancelable musi być boolowskie false.
W przypadku syntetycznych zdarzeń możemy samodzielnie ustawić możliwość anulowania domyślnych akcji (np. przy inicjowaniu zdarzenia). Zaufane zdarzenia mają ściśle określone akcje domyślne, dla przykładu zdarzenie typu wheel przewija lub powiększa dokument.
Za pomocą metody Event.preventDefault() można anulować domyślne akcje, ale tylko wtedy, gdy zdarzenie na to pozwala, co można sprawdzić za pomocą omawianej tutaj właściwości cancelable. Z kolei właściwość Event.defaultPrevented pozwala ustalić, czy domyślne akcje zostały już odwołane (np. przez innego obserwatora zdarzenia).
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>Interfejs Web IDL#
readonly attribute boolean cancelable;