Touch-Events
Über viele Jahre haben onmouseover / onmouseout und ihr CSS-Pendant :hover dem Benutzer gezeigt, dass hier Aktionen und Effekte ausgelöst werden können und Benutzerschnittstellen verständlich rübergebracht. Heute müssen wir für Touchscreens alternative Mittel einsetzen.
Touch-Pads am Notebook und Smartphones und Touchscreens reagieren nicht unbedingt und schon gar nicht wie einst auf Maus-Events, sondern auf Touch-Events und auf Gesten.
Es ist nicht einmal möglich, die Reaktion vorauszusagen. Vielleicht reagiert der Touchscreen auf CSS :hover, vielleicht nicht. Vielleicht wechselt der Hover-Button die Farbe wie beim Hovern mit der Maus, vielleicht friert der Effekt auf dem Touchscreen ein. Die Ära von :hover ist vorbei.
Kaum anders sieht es mit dem altgedienten mouseover und mouseout aus. Das Hovern mit der Maus kann also nicht einfach mit onmouseover und onmouseout ersetzt ersetzt werden, sondern die Javascript-Variante braucht zusätzlich touch-Events.
onmousedown, onmouseup
Javascript mouseup ruft einen Event Handler auf, wenn eine Maustaste über einem Element losgelassen wird. onmousedown ruft einen Event-Handler auf, wenn der Benutzer eine Taste der Maus über einem Element herunterdrückt.
Das Herunterdrücken einer Maustaste erzeugt immer drei Ereignisse: mousedown, mouseup und click, die in dieser Reihenfolge nacheinander abgearbeitet werden. Jedes Ereignis muss abgearbeitet sein, bevor das nächste Ereignis beginnen kann.
onmousedown – schnellere Reaktion bei Animationen
Auf den ersten Blick scheint onmousedown viel mit dem onclick-Event gemeinsam zu haben. Der entscheidende Unterschied: Das Event onmousedown feuert bereits, wenn der Benutzer die Maustaste herunterdrückt. Das Event onclick feuert, wenn die Taste heruntergedrückt und losgelassen wurde. onclick ist also eine Kombination aus onmousedown und onmouseup. mousedown anstelle von click kann dem Benutzer eine viel schnellere Reaktion bescheren als click.
onmousedown wird nicht oft verwendet, denn in den meisten Programmen kann der Benutzer den versehentlichen Klick auf ein Element noch zurücknehmen, indem er mit der bereits gedrückten Maustaste das Element wieder verläßt. Das funktioniert beim onclick-Event, nicht aber beim onmousedown-Event.
Hier ist also nichts mit »schnell noch runter vom Button«. Der Button reagiert bereits, wenn der Benutzer die Maustast auf dem Button herunterklickt, noch bevor die Maustaste wieder losgelassen wird.
document.getElementById('theButton').onmousedown = function (evt) {
let elem = evt.target;
document.getElementById('thisBox').innerHTML =
'event.target = ' + elem.tagName +
' event.type = ' + evt.type +
' event.button ' + evt.button;
}
Auf die Box klicken, um die Hintergrundfarbe zu ändern
document.getElementById('thisBox').onmouseup = function (event) {
this.setAttribute ('style','background: #E4F1F9');
}
Reagiert erst, wenn der Mausbutton losgelassen wird.
onmousemove
Javascript onmousemove ruft einen Event Handler auf, wenn die Maus über einem Element bewegt wird. mousemove feuert bei jedem Pixel, um den die Maus bewegt wird.
onmousemove bleibt aktiv, solange sich der Mauszeiger innerhalb des Elements befindet. Wenn der Mauszeiger das Element verlässt, wird onmouseout feuern.
<div id="theInput"></div> <p id="thisBox"></p>
document.getElementById('theInput').onmousemove = function(evt) {
let elem = evt.target;
let redbox = document.getElementById('redbox');
redbox.innerHTML = 'pageX ' + evt.pageX +
' pageY ' + evt.pageY +
' clientX ' + evt.clientX +
' clientY ' + evt.clientY + ' ' + mousedown;
}
mousedown ist die Abfrage, ob ein Button der Maus gedrückt ist, während die Maus über einem Bereich hovert.
let mouseDown = 0;
document.body.onmousedown = function() {
++mouseDown;
}
document.body.onmouseup = function() {
--mouseDown;
}
Quelle: JavaScript: Check if mouse button down? auf stackoverflow.com
mouseover: woher kam die Maus?
Nicht nur das Entdecken eines mouseover ist interessant, sondern auch die Frage, woher die Maus kam.
<div><img src="submarine.webp" id="image1" /></div> <p id="response"></p>
document.getElementById('image1').onmouseover = function (evt) {
let theBox = this.parentNode;
let elem = evt.target;
let relTarget = evt.relatedTarget;
let response = document.getElementById ('response');
response.style.display = "block";
response.innerHTML = ' Maus kommt von ' + relTarget.tagName + 'Auslösendes Element ist ' + elem.tagName;
if (this.src == 'img/mouseout.png') {
this.src = 'img/mouseover.png';
} else {
this.src = 'img/mouseout.png';
}
}
onmouseout
Javascript onmouseout löst einen Event Handler aus, wenn die Maus aus einem Element herausbewegt wird. Das mouseout-Event feuert in dem Augenblick, in dem der Mauszeiger die Grenze des Elements von innen nach außen überquert.
Das onmouseout-Event liefert im Parameter »relatedTarget« auch das Element, das die Maus beim Event betritt.
Vorsicht: Meist erwarten wir ein mouseover-Ereignis, aber hier tritt das Ereignis erst ein, wenn die Maus aus dem Bild herausbewegt wird.
const lion = document.querySelector("#lionout");
lion.addEventListener ("mouseout", function () {
this.classList.add ("lionisout")
});
Eigenschaften von Mouse Events
- button
- die Maustaste, die das Ereignis auslöst
- relatedTarget
- Beim mouseover das Element, das die Maus verlässt, wenn sie das Ereignis-auslösende Element betritt, beim mouseout-Ereignis das Element, das die Maus betritt, wenn sie das Ereignis-auslösende Element verlässt.
- type
- Typ des Ereignisses
- target
- Objekt zu dem das Ereignis ursprünglich gesendet wurde
- eventPhase
- Phase, in der das Ereignis bearbeitet wird: AT_TARGET, BUBBLING_PHASE, CAPTURING_PHASE
- bubbles
- true, wenn das Ereignis nach oben steigen kann
- cancelable
- true, wenn die Aktion des Ereignis verhindert werden kann
- timeStamp
- Zeit in Millisekunden, zu der das Ereignis eingetreten ist
- screenX, screenY, clientX, clientY
- Position des Mauszeigers zum Zeitpunkt des Ereignisses
- altKey, ctrlKey, shiftKey, metaKey
- zusätzlich gedrückte Tasten
