Wort unterm Cursor identifizieren

[Reinhard]

Hello Leute,

Ich habe heute Mittag mal geschaut, ob - und wenn ja, wie - ich an ein Wort komme, auf das ich mit dem Mauszeiger zeige. Ich habe mir natürlich vorher selbst Gedanken dazu gemacht; aber jedes einzelne Wort in ein span zu packen und dann über (mouseover) e.target.innerHTML zu gehen erscheint mir alles andere als elegant.
So stieß ich also auf document.caretPositionFromPoint (Firefox). Ich habe dann auch ein Anwendungsscript gefunden und gleich bei meinem neuen Projekt eingefügt. - und es fliegt mir teilweise um die Ohren (fehlerhafte Resultate).
Als ich euch ein Online-Beispiel zusammengehämmert habe, habe ich einen möglichen Grund gefunden, weswegen es nicht richtig funktioniert: in dieser Version des Beispiels funktioniert es fehlerhaft, aber wenn ihr den Punkt display: block bei span im CSS löscht funktioniert es wunderbar.
Zuerst hatte ich vermutet, dass der Wert von e.clientX durch die Eigenschaft transform: translateX(-50%) zu dem eigentlichen Fehlverhalten führt (was es auch zum Teil tut; addiert man die 50% der Weite zum e.clientX hinzu kommt größtenteils das richtige Ergebnis raus). Aber spätestens, wenn z.B. ein <i> im Code enthalten ist führt es zu einem - mir - unerklärlichen Verhalten: der Anfang der Zeile, in der sich das <i> befindet bis einschließlich dem Inhalt von <i> wird nicht erkannt. Ab dem nächsten Wort aber funktioniert es wieder...

Alles ist gut, solange span ein inline Element ist - aber warum? Mit block und inline-block klappt's nicht.

Gibt es mit dieser Funktion im Code und einem display: block irgendeine Perspektive für dieses Vorhaben? Irgendwelche Ideen wie ich mit dieser Funktion dennoch nicht auf die Eigenschaften von display: block verzichten muss?

Habt ihr irgendwelche Vorschläge, wie ich sonstnoch an das Wort, auf dem sich der Cursor befindet, komme?

Reinhard

[quincunx]

Hallo Reinhard,

diese leicht abgeändert Funktion stört sich nicht mehr an <tags> im Text und kommt auch ganz ohne die klammernden <span> aus; zum Vergnügen entferne ich noch die Interpunktion: replace(/[.,-/#!$%^&*;:{}=-_`~()]/g, '') ;-)) ansonsten habe ich die Funktion nur ein wenig umformatiert.

gr qx

[quincunx]

Hallo Reinhard,

diese leicht abgeändert Funktion; zum Vergnügen entferne ich noch die Interpunktion:

replace(/[.,-/#!$%^&*;:{}=-_~()]/g, '') ;-))

ansonsten habe ich die Funktion nur ein wenig umformatiert und das css ein wenig abgeändert.

gr qx

[Reinhard]

Hey,

diese leicht abgeänderte Funktion; zum Vergnügen entferne ich noch die Interpunktion

[...] das css ein wenig abgeändert.

Ich begreifs nicht... echt nicht...
Wieso fliegt mir dieselbe Funktion mit margin-left: 50% und transform: translateX(-50%) um die Ohren aber schnurrt wie ein Kätzchen mit margin: 0 25%?

Dennoch - Vielen Dank quincunx!

Reinhard

[quincunx]

Hallo Reinhard,

Ich begreifs nicht... echt nicht...
Wieso fliegt mir dieselbe Funktion mit margin-left: 50% und transform: translateX(-50%) um die Ohren aber schnurrt wie ein Kätzchen mit margin: 0 25%?

Wenn es mit diesem merkwürdigen css nicht geht, beschreite doch einen anderen Weg, um zu erreichen was du es dir vorstellst.

gr qx