1

I want to be able to hover the cursor over my webpage and at each point in time determine over which node/tag (div, img, p, etc) the cursor is over.

Basically I'd like to find the node at a random coordinate anywhere on my page. Maybe do a function like

returnXPathOfNodeFrom(130, 200)

and it will return either the Node or the xpath of the node which has content that displays at those coordinates.

AndreiBogdan
  • 10,858
  • 13
  • 58
  • 106

2 Answers2

2

You can use the Javascript method .elementFromPoint() which returns a DOM element.

According to documentation,

this method returns the element from the document whose elementFromPoint method is being called which is the topmost element which lies under the given point. To get an element, specify the point via coordinates, in CSS pixels, relative to the upper-left-most point in the window or frame containing the document.

See this article for more information: Using jQuery to find an element at a particular position? and also this fiddle.

Community
  • 1
  • 1
MaVRoSCy
  • 17,747
  • 15
  • 82
  • 125
1

Try :

$(document).ready(function(){        
   $(document).mouseover( function(e){      
       console.log('You are now on element id: ' + e.target.id);
   });
});
Anujith
  • 9,370
  • 6
  • 33
  • 48
  • is this method going to fire an event on each pixel the user drags his mouse to? – MaVRoSCy Mar 06 '13 at 06:54
  • i 've tested it and i see my cpu going up even on hovering empty places on screen – MaVRoSCy Mar 06 '13 at 06:59
  • 1
    i like this jQyery function though. Maybe the user should reconsider, or bind this method maybe to a click() event instead of mouseover() ... just thinking – MaVRoSCy Mar 06 '13 at 07:01