Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
tree: 355da2282f
Fetching contributors…

Cannot retrieve contributors at this time

31 lines (22 sloc) 1.286 kB

DOMNodeAndChildOffsetContainingViewportLocation

Say you're doing something webby. And you have a viewport or screen location. And you want to know what that user's touching. But you don't want to know just what element the user's touching: if he's touching a letter, you want to know which letter.

DOMNodeAndChildOffsetContainingViewportLocation: to the rescue!

I wrote this so that I could construct a DOMRange from a known location to the content under a user's cursor.

Example

# HTML:
<div id="mydiv">
  Some <strong>text</strong> and an image: <img src="a.jpg" />
</div>

# CoffeeScript:
$("#mydiv").mousemove( (event) ->
  window.DOMNodeAndChildOffsetContainingViewportLocation this, event.clientX, event.clientY
  # => [theTextNodeContaining'Some ', 3] (if your cursor is over the 'e')
  # => [theTextNodeContaining'text', 2] (if your cursor is over the 'x')
  # => [this, 3] (if your cursor is over the image)
  # => [null, 0] (if your cursor isn't within #myDiv)
)

Details

This should work in any browser which supports DOMRange.getClientRects. There are no library dependencies.

This function will perform slowly when asked to search large DOM trees, so you'll want to constrain the input node as much as possible before calling.

Jump to Line
Something went wrong with that request. Please try again.