Find Mouse Position Relative to Element

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().

Javascript: Get mouse position relative to parent element

Subtract the viewport-relative position of the parent element you can get via getBoundingClientRect() from the mouse position in the event's clientX and clientY to get relative position.

For example:

element.addEventListener("mousedown", function (e) {
    let bounds = parent.getBoundingClientRect();
    let x = e.clientX - bounds.left;
    let y = e.clientY - bounds.top;

    console.log(x, y);
});

Where element is your inner element receiving the event, and parent is your desired reference for the coordinates.

How can I get the mouse coordinates relative to a parent div? Javascript

In essence: 'mouseposition' - 'parent element position' = 'mouseposition relative to parent element'

So here I modified your function:

function onMousemove(e){
    var m_posx = 0, m_posy = 0, e_posx = 0, e_posy = 0,
           obj = this;
    //get mouse position on document crossbrowser
    if (!e){e = window.event;}
    if (e.pageX || e.pageY){
        m_posx = e.pageX;
        m_posy = e.pageY;
    } else if (e.clientX || e.clientY){
        m_posx = e.clientX + document.body.scrollLeft
                 + document.documentElement.scrollLeft;
        m_posy = e.clientY + document.body.scrollTop
                 + document.documentElement.scrollTop;
    }
    //get parent element position in document
    if (obj.offsetParent){
        do { 
            e_posx += obj.offsetLeft;
            e_posy += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }
    // mouse position minus elm position is mouseposition relative to element:
    dbg.innerHTML = ' X Position: ' + (m_posx-e_posx) 
                  + ' Y Position: ' + (m_posy-e_posy);
}

var elem = document.getElementById('container');
elem.addEventListener('mousemove', onMousemove, false);

var dbg=document.getElementById('dbg');  //debut output div instead of console

Here is a working demo fiddle. As you can read in the code, this also looks at the document's scroll position.

PPK's article on 'event properties' and 'find position' are (as always) a good read!

Hope this helps!

Update:
I actually found an error in ppk's code (how rare is that?!): I corrected the erroneous var in:

if (!e) var e = window.event; to if (!e){e = window.event;}

JavsScript — Track mouse position relative to the middle of the screen

Here is one way to do it. Divide mouse x-position with windowWidth so the position is between 0-1. Start from -1 and add xValue/windowWidth*2 so it is mapped between -1 and 1. With y position start from 1 so top 1 and bottom is -1.

onmousemove = function (e) {
    
    let windowHeight = window.innerHeight
    let windowWidth = window.innerWidth
    let xValue = e.x
    let yValue = e.y

    let mousePosX = -1+(xValue/windowWidth)*2
    let mousePosY = 1-(yValue/windowHeight)*2
};

Mousemove Event: mouse position relative to parent element

To get the mouse position relative to the outer div, subtract the client position of the outer div from the client position of the mouse. A template reference variable outerDiv can be used to pass the outer element to the event handler.

<div #outerDiv (mousemove)="onMouseMove($event, outerDiv)">
  <div class="innerDiv">
  </div>
</div>

In the event handler, the client mouse position is obtained with event.clientX and event.clientY, and the outer div client position is obtained with outerDiv.getBoundingClientRect().

onMouseMove(event: MouseEvent, outerDiv: HTMLElement) {
  const bounds = outerDiv.getBoundingClientRect();
  const posX = event.clientX - bounds.left;
  const posY = event.clientY - bounds.top;
  console.log(posX, posY);
}

See this stackblitz for a demo.

Is it possible to get the mouse position only relative to your element

You can use this: https://developer.mozilla.org/es/docs/Web/API/Element/getBoundingClientRect
To get the position of the element, and then it's a simple operation.

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;
});

---

Related Topics