Zdarzenia#
Typ mouseup#
| Typ: | mouseup |
|---|---|
| Interfejs: | MouseEvent |
| Sync / Async: | Sync |
| Bąbelkowanie | Tak |
| Zaufane cele | Element |
| Anulowanie | Tak |
| Domyślna akcja | Wywołanie menu kontekstowego (w połączeniu z prawym przyciskiem myszy, jeśli obsługiwany) |
| Kontekst (zaufane zdarzenia) |
|
Zdarzenie typu mouseup musi zostać wysłane przez aplikację kliencką dla wierzchniego celu zdarzenia wskazywanego przez urządzenie wskazujące, kiedy użytkownik zwalnia przycisk urządzenia wskazującego.
Wiele implementacji wywoła menu kontekstowe stanowiące domyślną akcję tego zdarzenia jeśli prawy przycisk myszy jest zwalniany.
W niektórych środowiskach wykonawczych, jak np. przeglądarki internetowe, zdarzenie typu mouseup może zostać wysłane nawet jeśli urządzenie wskazujące opuszcza granicę aplikacji klienckiej, tj. kiedy użytkownik rozpoczął operację przeciągania z wciśniętym przyciskiem myszy.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
input<span class="nocode">:focus</span> {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 = info.innerHTML + data;
}
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