Zdarzenia#
Typ dblclick#
| Typ: | dblclick |
|---|---|
| Interfejs: | MouseEvent |
| Sync / Async: | Sync |
| Bąbelkowanie | Tak |
| Zaufane cele | Element |
| Anulowanie | Tak |
| Domyślna akcja | Brak |
| Kontekst (zaufane zdarzenia) |
|
Zdarzenie typu dblclick musi zostać wysłane przez aplikację kliencką dla wierzchniego celu zdarzenia wskazywanego przez urządzenie wskazujące, kiedy użytkownik dwukrotnie kliknął przycisk urządzenia wskazującego. Definicja dwukrotnego kliknięcia zależy od konfiguracji środowiska, z wyjątkiem tego, że cel zdarzenia musi być taki sam między zdarzeniami mousedown, mouseup i dblclick. Zdarzenie to musi zostać wysłane po zdarzeniu click, zakładając że obydwa wystąpiły jednocześnie, w przeciwnym razie po zdarzeniu mouseup.
Zdarzenie typu dblclick, podobnie jak zdarzenie click, 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ń dblclick.
Domyślna akcja dla zdarzenia typu dblclick różni się w zależności od celu zdarzenia oraz wartości wskazywanej we właściwości MouseEvent.button lub MouseEvent.buttons. Zazwyczaj typowe domyślne akcje dla zdarzenia dblclick odpowiadają tym zdefiniowanym dla zdarzenia click, z następującym dodatkowym zachowaniem:
- Jeśli cel zdarzenia podlega zaznaczeniu to domyślną akcją musi być zaznaczenie części lub całości treści podlegającej zaznaczeniu. Dodatkowe kliknięcia mogą wybierać kolejne części tej treści.
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>