Zdarzenia#
Typ click#
| Typ: | click |
|---|---|
| Interfejs: | MouseEvent |
| Sync / Async: | Sync |
| Bąbelkowanie | Tak |
| Zaufane cele | Element |
| Anulowanie | Tak |
| Domyślna akcja | Zmienna |
| Kontekst (zaufane zdarzenia) |
|
Zdarzenie typu click musi zostać wysłane przez aplikację kliencką dla wierzchniego celu zdarzenia wskazywanego przez urządzenie wskazujące, kiedy użytkownik wciska i zwalnia główny przycisk urządzenia wskazującego, lub w inny sposób aktywuje urządzenie wskazujące symulując takie działanie. Metoda aktywacji przycisku myszy zależy od urządzenia wskazującego i konfiguracji środowiska, przykładowo może zależeć od położenia ekranu lub opóźnienia pomiędzy wciśnięciem a zwolnieniem przycisku urządzenia wskazujące.
Zdarzenie typu click, podobnie jak zdarzenie dblclick, powinno być odpalane jedynie dla głównego przycisku urządzenia wskazującego (tzn. kiedy wartością MouseEvent.button jest 0 i wartością MouseEvent.buttons jest 1). Przyciski dodatkowe (jak środkowy lub prawy przycisk w standardowej myszy) nie mogą odpalać zdarzeń click.
Zdarzenie typu click może być poprzedzane zdarzeniami mousedown i mouseup na tym samym elemencie, pomijając zmiany między innymi rodzajami węzłów (np. tekstowymi). W zależności od konfiguracji środowiska zdarzenie click może być wysyłane jeśli jedno lub większa liczba zdarzeń typu mouseover, mousemove i mouseout występuje pomiędzy wciśnięciem a zwolnieniem przycisku urządzenia wskazującego. Zdarzenie click może również poprzedzać zdarzenie dblclick.
Dla przykładu, jeśli użytkownik wciska przycisk myszy na węźle tekstowym będącym dzieckiem elementu <p>, któremu ustawiono dużą wartość właściwości line-height, a następnie nieznacznie przesuwa mysz, tak że nie znajduje się nad powierzchnią zawierającą tekst, ale nadal jest w obrębie bloku objętego przez element <p> (tj. wskaźnik jest pomiędzy liniami tego samego bloku tekstowego, ale nie na węźle tekstowym), i w ostateczności zwalnia przycisk myszy, to zdarzenie typu click prawdopodobnie zostanie wywołane (jeśli mieści się w czasowej histerezie dla click), gdyż użytkownik wciąż przebywa w obrębie tego samego elementu. Należy pamiętać, że zdarzenia click generowane przez aplikacje klienckie nie są wysyłane do węzłów tekstowy.
Zdarzenie typu click, oprócz naturalnego powiązania z urządzeniami wskazującymi, musi być również wysyłane w ramach aktywacji elementu, jak opisano w podrozdziale "Aktywujące wyzwalacze i zachowania".
W celu zapewnienia maksymalnej dostępności autorzy zawartości są zachęcani do korzystania ze zdarzenia typu click, kiedy planują kontrolować aktywujące zachowania, zamiast innych typów zdarzeń urządzenia wskazującego, jak np. mousedown lub mouseup, które są bardziej zależne od rodzaju stosowanego urządzenia. Chociaż zdarzenie click jest kojarzone z urządzeniami wskazującymi (np. myszą), to kolejne ulepszenia w implementacjach rozszerzyły jego zastosowanie, i w tej chwili może być uznawane za typ zdarzenia aktywującego element niezależnie od używanego urządzenia.
Domyślna akcja dla zdarzenia typu click różni się w zależności od celu zdarzenia oraz wartości wskazywanej we właściwości MouseEvent.button lub MouseEvent.buttons. Typowymi domyślnymi akcjami dla zdarzenia click są:
- Jeśli cel zdarzenia jest skojarzony z aktywującym zachowaniem to domyślną akcją musi być wykonanie tego aktywujące zachowanie (zobacz "Aktywujące wyzwalacze i zachowania").
- Jeśli cel zdarzenia podlega zogniskowaniu to domyślną akcją musi być przekazanie zogniskowania do tego elementu dokumentu.
Anulowanie zdarzenia typu click nie ma wpływu na odpalenie zdarzenia dblclick.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
input:focus {outline: 5px solid green;}
</style>
</head>
<body>
<p>Kliknij (ewentualnie podwójnie) głównym przyciskiem myszy w jedną z poniższych kontrolek by uzyskać szczegółowe informacje dla zdarzenia.</p>
<input id="input1" type="text" value="Pierwsza kontrolka">
<input id="input2" type="text" value="Druga kontrolka">
<input id="input3" type="text" value="Trzecia kontrolka">
<p style="color: blue;">Szczegółowe informacje dla przechwyconego zdarzenia:</p>
<p id="info"></p>
<script>
var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");
var input3 = document.getElementById("input3");
var info = document.getElementById("info");
function readInfo(e){
var data = "Interfejs: " + e
+ "<br>" + "e.type: " + e.type
+ "<br>" + "e.target: " + e.target
+ "<br>" + "e.target.value: " + e.target.value
+ "<br>" + "e.relatedTarget: " + e.relatedTarget;
if (e.relatedTarget && e.relatedTarget.tagName.toLowerCase() == "input"){
data += "<br>" + "e.relatedTarget.value: " + e.relatedTarget.value;
}
data += "<br>" + "e.detail: " + e.detail
+ "<br>" + "e.button: " + e.button
+ "<br>" + "e.currentTarget: " + e.currentTarget
+ "<br>" + "e.eventPhase: " + e.eventPhase + "<br><br>";
info.innerHTML = data + info.innerHTML;
}
input1.addEventListener("click", readInfo, false);
input1.addEventListener("dblclick", readInfo, false);
input2.addEventListener("click", readInfo, false);
input2.addEventListener("dblclick", readInfo, false);
input3.addEventListener("click", readInfo, false);
input3.addEventListener("dblclick", readInfo, false);
</script>
</body>
</html>