Wie bekomme ich das Wort mit JavaScript unter den Cursor in Chrome?

Das Wort unter den Cursor in JavaScript bringen

Bei der Webentwicklung kann es hilfreich sein zu wissen, über welchem ​​Wort sich der Cursor gerade befindet . In diesem Artikel wird eine JavaScript-Lösung vorgestellt, die speziell in Chrome-Browsern funktioniert.

Funktionsübersicht

Die Funktion getWordAtPoint benötigt drei Parameter: ein Element (elem), eine x-Koordinate (x) und eine y-Koordinate (y). Es verwendet das Range-Objekt, um den Textinhalt eines HTML-Elements zu durchlaufen und zu bestimmen, welches Wort sich an den angegebenen Koordinaten unter dem Cursor befindet.

Implementierung

Die Funktion zuerst prüft, ob das Eingabeelement ein Textknoten ist. Wenn dies der Fall ist, wird ein Range-Objekt erstellt, das den Textinhalt des Elements auswählt. Anschließend wird mithilfe einer Schleife jedes Zeichen im Text schrittweise ausgewählt. Dabei wird die Methode getBoundingClientRect() verwendet, um zu ermitteln, ob das Begrenzungsrechteck des aktuellen Zeichens die angegebenen Koordinaten enthält. Wenn eine Übereinstimmung gefunden wird, wird das Range-Objekt mithilfe der Methode expand() so erweitert, dass es das gesamte Wort umfasst. Schließlich gibt die Funktion die Zeichenfolgendarstellung des Wortes zurück.

Wenn das Eingabeelement kein Textknoten ist, iteriert die Funktion rekursiv über seine untergeordneten Knoten, bis sie den Textknoten findet, der die angegebenen Koordinaten enthält.

Verwendung

Um diese Funktion zu verwenden, können Sie sie an einen Mousemove-Ereignishandler am gewünschten HTML-Element anhängen. Zum Beispiel:

<code class="javascript">document.addEventListener('mousemove', (e) => {
  const word = getWordAtPoint(e.target, e.x, e.y);
  console.log(word);
});</code>

Dieser Code protokolliert das Wort unter dem Cursor jedes Mal in der Konsole, wenn der Benutzer die Maus über das angegebene Element bewegt.

Das obige ist der detaillierte Inhalt vonWie bekomme ich das Wort mit JavaScript unter den Cursor in Chrome?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!