Bewegen Sie den Mauszeiger mit JavaScript an eine bestimmte Position
- Erstellen Sie eine grundlegende HTML-Struktur mit etwas CSS-Styling
- Verwenden Sie JavaScript, um den Mauszeiger an eine bestimmte Position zu bewegen
- Abschluss
Beachten Sie, dass es in JavaScript keine Möglichkeit gibt, den Mauszeiger an eine bestimmte Position zu bewegen. Der Hauptgrund ist, dass es Sicherheitsprobleme für die Benutzer verursachen und die Benutzererfahrung beeinträchtigen kann.
In diesem Artikel erstellen wir einen gefälschten oder benutzerdefinierten Mauszeiger, der dem Mauszeiger des Standardsystems ähneln kann, und verschieben seine Position dann mithilfe von JavaScript an eine andere Position. Diese Technik, einen Mauszeiger auf eine bestimmte Position zu bewegen, dient zu Demonstrationszwecken und sollte auf produktionsreifen Websites vollständig vermieden werden.
Erstellen Sie eine grundlegende HTML-Struktur mit etwas CSS-Styling
Wir werden zwei Schaltflächen auf dem Bildschirm erstellen (eine auf der linken und eine weitere auf der rechten Seite des Bildschirms), und unser Ziel ist es, wenn wir auf die erste Schaltfläche klicken, wird der Mauszeiger automatisch auf die zweite Schaltfläche auf dem Bildschirm bewegt Bildschirm.
Zuerst erstellen wir zwei HTML-Elemente in unserem HTML, ein img-Tag und ein weiteres das div-Element. Das img-Tag enthält das Bild des benutzerdefinierten oder gefälschten Cursors, der anstelle des ursprünglichen System-Mauscursors verwendet wird.
Sie können jedes beliebige Mauszeigerbild aus dem Internet verwenden. Das div hat zwei Knöpfe, "button 1" und "button 2" darin.
Wir werden all diesen Elementen auch eine id geben, damit wir sie in JavaScript referenzieren und sie in CSS formatieren können.
Codeausschnitt - HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Move mouse pointer</title>
<style>
* {
cursor: none;
}
.block{
display: flex;
justify-content: space-between;
}
img {
pointer-events: none;
position: absolute;
}
</style>
</head>
<body>
<img id="cursor" src="./mouse_cursor.png" width="16" height="22" />
<div class="block">
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
</div>
</body>
</html>
Innerhalb des CSS verstecken wir den Mauszeiger des Originalsystems von der gesamten Seite mit Hilfe der CSS-Eigenschaft cursor: none innerhalb des Sternchens (*), auch als CSS-Universalselektor bekannt. Dann fügen wir dem div-Element eine Flexbox hinzu, damit zwischen ihnen ein Leerzeichen sein kann.
Auf dem Tag img fügt unser benutzerdefinierter Cursor die Eigenschaft pointer-events: none hinzu, sodass keine Zeigerereignisse darauf angewendet werden können. Sie können mehr über pointer-events auf MDN erfahren, und wir machen es absolut, damit wir es überall auf dem Bildschirm verschieben können.
Verwenden Sie JavaScript, um den Mauszeiger an eine bestimmte Position zu bewegen
Lassen Sie uns nun die Funktionalität dafür mit JavaScript implementieren. Zuerst greifen wir alle Cursor-Elemente btn1 und btn2 mit der Methode getElementById() im JavaScript.
Da wir den Mauszeiger an eine bestimmte Position bewegen wollen, in diesem Fall auf button 2, müssen wir zuerst die Positionen (links, oben, Breite, Höhe) von button 2 greifen, damit wir beim Anklicken auf Taste 1, der Mauszeiger bewegt sich automatisch auf Taste 2.
Dazu verwenden wir die Methode getBoundingClientRect() auf btn2, die uns ein Objekt liefert, das verschiedene Positionen und Abmessungen wie links, oben, unten, Breite, Höhe usw. enthält, und wir speichern dieses Objekt in einer Variablen namens rect. Dann berechnen wir die finalPositionX und finalPositionY von button 2, sodass wir den Mauszeiger in die Mitte von button 2 bringen können, wenn wir auf button 1 klicken.
Unser benutzerdefinierter Mauszeiger bewegt sich an dieser Position nicht auf dem Bildschirm. Damit es sich im Browser frei bewegen kann, müssen wir dem Fensterobjekt einen Ereignis-Listener hinzufügen.
Diese Methode benötigt zwei Parameter, der erste ist der Ereignistyp, für den wir eine Funktion ausführen möchten, und der zweite ist die Funktion selbst, die ausgeführt wird, wenn dieses Ereignis ausgelöst wird.
Da wir unseren benutzerdefinierten Mauszeiger bewegen möchten, verwenden wir das Ereignis mousemove als unseren ersten Parameter, und dann werden wir in unserer Callback-Funktion die Koordinaten clientX und clientY erfassen und dann zuweisen es an die linke und obere Position unseres benutzerdefinierten Mauszeigers, wie unten gezeigt.
Vergessen Sie nicht, am Ende "px" hinzuzufügen; andernfalls wird es nicht funktionieren.
Codeausschnitt - JavaScript:
let cursor = document.getElementById('cursor');
let btn1 = document.getElementById('btn1');
let btn2 = document.getElementById('btn2');
let rect = btn2.getBoundingClientRect();
let finalPositionX = rect.left + rect.width / 2;
let finalPositionY = rect.top + rect.height / 2;
// Moving our custom mouse pointer
window.addEventListener('mousemove', (e) => {
x = e.clientX;
y = e.clientY;
cursor.style.left = x + 'px';
cursor.style.top = y + 'px';
});
btn1.addEventListener('mouseup', (e) => {
cursor.style.left = finalPositionX + 'px';
cursor.style.top = finalPositionY + 'px';
})
In diesem Stadium bewegt sich der benutzerdefinierte Mauszeiger wie der normale Mauszeiger. Jetzt bewegen wir den benutzerdefinierten Mauszeiger an eine bestimmte Position.
Dazu fügen wir ein mouseup-Ereignis auf btn1 hinzu und setzen dann die Mauszeiger auf die Positionen links und oben mit den Positionen finalPositionX und finalPositionY.
Ausgang:
Abschluss
Es gibt keine direkte Möglichkeit, die Mausposition mit JavaScript zu ändern, da es einige Nachteile hat. Aber es gibt immer andere und inoffizielle Vorgehensweisen beim Programmieren.
Um das Problem des Bewegens des Mauszeigers an eine bestimmte Position zu lösen, müssen wir den ursprünglichen Mauszeiger ausblenden. Dann müssen wir zwei unseren benutzerdefinierten Mauszeiger erstellen und JavaScript-Code schreiben, damit er sich an eine bestimmte Position bewegt.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn