How to Know What Elements Are in Current Mouse Position

Find mouse position relative to element

For people using JQuery:

Sometimes, when you have nested elements, one of them with the event attached to it, it can be confusing to understand what your browser sees as the parent. Here, you can specify which parent.

You take the mouse position, and then subtract it from the parent element's offset position.

var x = evt.pageX - $('#element').offset().left;
var y = evt.pageY - $('#element').offset().top;

If you're trying to get the mouse position on a page inside a scrolling pane:

var x = (evt.pageX - $('#element').offset().left) + self.frame.scrollLeft();
var y = (evt.pageY - $('#element').offset().top) + self.frame.scrollTop();

Or the position relative to the page:

var x = (evt.pageX - $('#element').offset().left) + $(window).scrollLeft();
var y = (evt.pageY - $('#element').offset().top) + $(window).scrollTop();

Note the following performance optimisation:

var offset = $('#element').offset();
// Then refer to 
var x = evt.pageX - offset.left;

In this way, JQuery does not have to look up #element for each line.

Update

There is a newer, JavaScript-only version in an answer by @anytimecoder -- see also browser support for getBoundingClientRect().

React, Want to get current mouse position of the current element

I made you a pen using e.clientX - e.target.offsetLeft and e.clientY - e.target.offsetTop. The top left corner of the canvas (in pink) is giving me 0,0 which seems right.

How to calculate the mouse position from the center of an element in Jquery

You need to first get the object's center point, X & Y (objCenterX & objCenterY in the code, below), then subtract that from the mouse's current coordinates.

This should do it for you:

    $("#test").mousemove(function (event) {
        var objLeft = $("#test").offset().left;
        var objTop = $("#test").offset().top;

        var objCenterX = objLeft + $("#test").width() / 2;
        var objCenterY = objTop + $("#test").height() / 2;

        $("#results").text("Left:" + (event.pageX - objCenterX) + ", Top:" + (event.pageY - objCenterY));
    })

Is there a way to tell Chrome web debugger to show the current mouse position in page coordinates?

You could type this into the console,

document.onmousemove = function(e){
var x = e.pageX;
var y = e.pageY;
e.target.title = "X is "+x+" and Y is "+y;
};

This will give you mouse position on mouse move in the element tooltip.

jQuery get mouse position within an element

One way is to use the jQuery offset method to translate the event.pageX and event.pageY coordinates from the event into a mouse position relative to the parent. Here's an example for future reference:

$("#something").click(function(e){
   var parentOffset = $(this).parent().offset(); 
   //or $(this).offset(); if you really just want the current element's offset
   var relX = e.pageX - parentOffset.left;
   var relY = e.pageY - parentOffset.top;
});

Detect mouse position with respect to an element

You can do the thing you want with jQuery

CSS:

body {
  cursor:pointer;
}

td {
  border:#777 1px solid;
  font-family:georgia; font-size:50px;
}

#content {
  background:green;
}

HTML:

<input id="left"/> (left)<br/>
<input id="width"/> (width)<br/>
<input id="pageX"/> (pageX)<br/>

<table>
  <tr>
    <td>Left</td>
    <td id="content">Center</td>
    <td>Right</td>
  </tr>
</table>

JS:

$(document).ready(function(){
  $(document).mousemove(function(event){
    var content = $("#content");
    var left  = content.offset().left;
    var width = content.width();
    var pageX = event.pageX;

    $("#left").get(0).value = left;
    $("#width").get(0).value = width;
    $("#pageX").get(0).value = pageX;

    if (pageX<left)
      content.css({"background":"red"});
    else
    if (pageX>left+width)
      content.css({"background":"blue"});
    else
      content.css({"background":"green"});
  });
});

See the full HTML, CSS, JS in this jsfiddle: http://jsfiddle.net/jondinham/95te26q6/

Get element currently under mouse without using mouse events

I just looked through the source for code that gets (or stores and makes available) the cursor position. I didn't find anything one could use (from Javascript, XPCOM or not). I might have missed something... MXR is your friend.

However, if you want to avoid mousemove (and this is a good idea in general), you can just look for the innermost hovered element, e.g. like so.

function getInnermostHovered() {
    var n = document.querySelector(":hover");
    var nn;
    while (n) {
        nn = n;
        n = nn.querySelector(":hover");
    }
    return nn;
}

(fiddle demoing the principle)

While this is what I'd consider a hack, it seems to work good enough most of the time, but will fail if the element has mouse events disabled via pointer-events. There could be other issues I didn't think of...

Of course, this can return nothing when the document has no hovered element (e.g. the mouse is not actually within the document).

---

Related Topics