Element: mousemove-Ereignis
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Das mousemove-Ereignis wird an einem Element ausgelöst, wenn ein Zeigegerät (üblicherweise eine Maus) bewegt wird, während sich der Hotspot des Mauszeigers innerhalb des Elements befindet.
Diese Ereignisse treten unabhängig davon auf, ob Maustasten gedrückt sind. Sie können sehr häufig ausgelöst werden – abhängig davon, wie schnell die Maus bewegt wird, wie leistungsfähig der Computer ist und welche anderen Aufgaben und Prozesse gerade ausgeführt werden.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("mousemove", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
onmousemove = (event) => { }
Ereignistyp
Ein MouseEvent. Erbt von UIEvent und Event.
Beispiele
Das folgende Beispiel verwendet die Ereignisse mousedown, mousemove und mouseup, damit Benutzer auf einem HTML-Canvas zeichnen können. Die Funktionsweise ist einfach: Die Linienstärke ist auf 1 festgelegt, und die Farbe ist immer Schwarz.
Beim Laden der Seite werden die Konstanten myPics und context erstellt. Sie speichern Referenzen auf das Canvas und den 2D-Kontext, der zum Zeichnen verwendet wird.
Das Zeichnen beginnt, wenn das mousedown-Ereignis ausgelöst wird. Zuerst werden die x- und y-Koordinaten des Mauszeigers in den Variablen x und y gespeichert. Anschließend wird isDrawing auf true gesetzt.
Während sich die Maus über die Seite bewegt, wird das mousemove-Ereignis ausgelöst. Wenn isDrawing den Wert true hat, ruft der Event-Handler die Funktion drawLine auf, um eine Linie von den gespeicherten Werten x und y zur aktuellen Position zu zeichnen.
Nachdem die Funktion drawLine() zurückgekehrt ist, werden die Koordinaten aktualisiert und in x und y gespeichert.
Das mouseup-Ereignis zeichnet das letzte Liniensegment, setzt x und y auf 0 und beendet das Zeichnen, indem es isDrawing auf false setzt.
HTML
<h1>Drawing with mouse events</h1>
<canvas id="myPics" width="560" height="360"></canvas>
CSS
canvas {
border: 1px solid black;
width: 560px;
height: 360px;
}
JavaScript
// When true, moving the mouse draws on the canvas
let isDrawing = false;
let x = 0;
let y = 0;
const myPics = document.getElementById("myPics");
const context = myPics.getContext("2d");
// event.offsetX, event.offsetY gives the (x,y) offset from the edge of the canvas.
// Add the event listeners for mousedown, mousemove, and mouseup
myPics.addEventListener("mousedown", (e) => {
x = e.offsetX;
y = e.offsetY;
isDrawing = true;
});
myPics.addEventListener("mousemove", (e) => {
if (isDrawing) {
drawLine(context, x, y, e.offsetX, e.offsetY);
x = e.offsetX;
y = e.offsetY;
}
});
window.addEventListener("mouseup", (e) => {
if (isDrawing) {
drawLine(context, x, y, e.offsetX, e.offsetY);
x = 0;
y = 0;
isDrawing = false;
}
});
function drawLine(context, x1, y1, x2, y2) {
context.beginPath();
context.strokeStyle = "black";
context.lineWidth = 1;
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();
context.closePath();
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| Pointer Events # mousemove |
| HTML # handler-onmousemove |