Question

I’d like to detect mouse movements over the whole document body, and be able to tell exactly which part of the DOM I’m hovering over. By “Which part” I mean the innermost DOM element that the mouse is currently over.

I could bind a hover to the whole document body, but then the $(this) would give me the $(body), not the innermost element. Or I could iterate over the whole DOM recursively and bind a hover to each elements, but that would be a serious overkill IMO.

Is there an easy way to achieve this?

Answer 1

Based on Jasie’s suggestion, I ended up using the following code:

var currentNode = null;
$('body').mousemove(function(event) {
  if ($(event.target) !== currentNode) {
    currentNode = $(event.target);
    console.log(currentNode);
  }
});