help: find character under mouse cursor

[bootstrap]

To implement my extension, my javascript code needs to find which
character is under the mouse cursor.

Some people here suggested the "elementFromPoint()" function. On the
other hand, apparently the originating element and the x,y coordinates
of the mouse cursor (in screen-coords and client-coords) is available
in every mouse event (including mousemove, which is what I need to
monitor).

My problem is, it is insufficient to know which element the mouse
cursor is over. When the mouse cursor is over a text node (which
technically isn't an "element" at all), I need to find which character
in that text the mouse cursor is over. Unfortunately, I have not been
able to find any DOM function that returns that information (though
one book said the range object and API are too complex to fully
describe in this book).

It is obvious that "somewhere" the necessary information exists,
because otherwise "text selection" could not happen as a result of
"mousedown + mousemoves". But "text selection" does work, though I
suppose it is possible that this code is entirely inside gecko
somewhere, and the necessary information is not available to
javascript applications (though I can't imagine why).

The bottom line question is: how do I find out which character of
text is under the mouse cursor inside a mousemove event processing
function?

PS: Thanks to everyone who has been helping me. I've made a lot of
progress in the past week or so thanks to your many tips (and a dozen
javascript and DOM books I bought in the past few days).

[Neil Deakin]

On 12-03-23 4:28 AM, bootstrap wrote:
> The bottom line question is: how do I find out which character of
> text is under the mouse cursor inside a mousemove event processing
> function?
>

You can retrieve the event's rangeParent and rangeOffset properties to
get the element and the character offset within that element where the
event occurred.

[bootstrap]

Wow, that sounds great. But I when I look inside the "event object"
and "element object" documentation, I see nothing at all about any
rangeParent, rangeOffset, or range objects, or anything like that.

I'm at a loss. What code retrieves an events rangeParent or
rangeOffset?

https://developer.mozilla.org/en/DOM/Event
https://developer.mozilla.org/en/DOM/element

However, I did find a mention of event.rangeParent and
event.rangeOffset
at the following web-page: http://help.dottoro.com/ljifpseq.php#supByObj
.
So I guess there is or was something like this afterall, though a
search
throught the mozilla domain finds no matches for rangeParent or
rangeOffset.

I'm a bit worried, though. I need to know what character the mouse
cursor
is over during mousemove events (or actually, in a setTimeout event
handler
that goes off 200ms after last mousemove. But the point is, I need
this
information when there is no selection, and not even a mousedown
event.

Is there going to be a selection even in this case (no mouse buttons
down)?
If not, maybe the javascript can fake a mousedown [and mouseup] to
trick
mozilla into capturing that location in a range object as the
selection "anchor".

PS: Am I looking in the wrong places to find what properties and
methods
exist for each DOM/mozilla/javascript object?

[Gijs Kruitbosch]

You'd need to create the range from the coordinates. Google finds:
http://stackoverflow.com/a/3710561/713326

(I haven't tested this, but it looks like it should get you started)

Gijs

[Neil Deakin]

On 12-03-23 10:47 AM, bootstrap wrote:
> So I guess there is or was something like this afterall, though a
> search
> throught the mozilla domain finds no matches for rangeParent or
> rangeOffset.
>
> I'm a bit worried, though. I need to know what character the mouse
> cursor
> is over during mousemove events (or actually, in a setTimeout event
> handler
> that goes off 200ms after last mousemove. But the point is, I need
> this
> information when there is no selection, and not even a mousedown
> event.

I can't seem to find any documentation on it either. The link you
pointed to isn't correct either. A selection isn't necessary, but you do
need to access it within an event (although you could cache the results
and then later use them in a timer)

event.rangeParent returns the node containing the text that you clicked
on, and event.rangeOffset returns the character offset within the
rangeParent.

One example is that Firefox uses these properties to retrieve the
misspelled words when you open a context menu on them.

[Gijs Kruitbosch]

My assertion that you'd need to create the range is wrong, please listen to Neil
instead. :-)

Gijs

[bootstrap]

Guys --- thanks so much.

Without event.rangeParent and event.rangeOffset
my extension would be impossible to implement.
Fortunately, the information appears to be valid
for mouse move as well as mouse down and up.

But this raises a very practical question for me,
a question that other newbies need to know too.

Where do we find "obscure" information like this?
A search of mozilla and MDN for rangeParent and
rangeOffset generated nothing. But the situation
is worse than that, because I would never have
guessed the names rangeParent and rangeOffset
were the magic words I needed to find. :-o

I think I'm suffering a similar problem when I try
to create a borderless window with window.open().
The 3rd argument options that seem like they
should work, do not work. But perhaps some
other "obscure" options exist to "do the trick".

So, where do I find exhaustive lists of objects,
methods, properties, attributes, options, etc?

-----

On a related topic. One of you mozilla extension
gurus REALLY, REALLY, REALLY needs to write
a thorough book about mozilla/firefox extensions.
There are books about building applications with
the mozilla code-base, but nothing about building
mozilla/firefox extensions as far as I can determine.

And thanks again for saving my butt (project).