Zdarzenia#
Typ mousedown#
| Typ: | mousedown |
|---|---|
| Interfejs: | MouseEvent |
| Sync / Async: | Sync |
| Bąbelkowanie | Tak |
| Zaufane cele | Element |
| Anulowanie | Tak |
| Domyślna akcja | Zmienna: rozpoczęcie operacji przeciągania/upuszczania, rozpoczęcie zaznaczenia tekstu, rozpoczęcie interakcji przewijania/przesuwania (w połączeniu ze środkowym przyciskiem myszy, jeśli obsługiwany) |
| Kontekst (zaufane zdarzenia) |
|
Zdarzenie typu mousedown musi zostać wysłane przez aplikację kliencką dla wierzchniego celu zdarzenia wskazywanego przez urządzenie wskazujące, kiedy użytkownik wcisnął przycisk urządzenia wskazującego.
Wiele implementacji używa zdarzenia typu mousedown w celu rozpoczęcia szeregu domyślnych akcji zależnych od kontekstu. Te domyślne akcje mogą zostać anulowane jeśli zdarzenie jest odwoływalne. Niektóre z tych domyślnych akcji mogą obejmować: rozpoczęcie interakcji przeciągania/upuszczania z obrazem lub odsyłaczem, rozpoczęcie zaznaczenia tekstu itd. Dodatkowo niektóre implementacji wprowadzają funkcję "mouse-driven panning", która będzie aktywna, kiedy środkowy przycisk myszy jest naciśnięty w chwili wysłania zdarzenia mousedown.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
input:focus {outline: 5px solid green;}
</style>
</head>
<body>
<p>Wciśnij (i chwilę przytrzymaj) a nastęnie zwolnij dowolny przycisk myszy w jednej 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("mousedown", readInfo, false);
input1.addEventListener("mouseup", readInfo, false);
input2.addEventListener("mousedown", readInfo, false);
input2.addEventListener("mouseup", readInfo, false);
input3.addEventListener("mousedown", readInfo, false);
input3.addEventListener("mouseup", readInfo, false);
</script>
</body>
</html>Specyfikacje i inne materiały#
Pasek społecznościowy