Find mouse position relative to element

Asked
Active3 hr before
Viewed126 times

8 Answers

mouseposition
90%

Get the position of an element relative to another,Get the position of an element relative to the document,Show a custom context menu at clicked position,Drag and drop element in a list

ele.addEventListener('mousedown', function(e) { // Get the target    const target = e.target;
         // Get the bounding rectangle of target    const rect = target.getBoundingClientRect();
         // Mouse position    const x = e.clientX - rect.left;    const y = e.clientY - rect.top;});
88%

You can simply use jQuery’s event.pageX and event.pageY with the method offset() of jQuery to get the position of the mouse relative to an element.,You can see an example here: How to find mouse position relative to element,The following calculates the mouse position relation to the canvas element:,You take the mouse position, and then subtract it from the parent element's offset position.

document.getElementById('clickme').onclick = function clickEvent(e) {
   // e = Mouse click event.
   var rect = e.target.getBoundingClientRect();
   var x = e.clientX - rect.left; //x position within the element.
   var y = e.clientY - rect.top; //y position within the element.
   console.log("Left? : " + x + " ; Top? : " + y + ".");
}
#clickme {
   margin - top: 20 px;
   margin - left: 100 px;
   border: 1 px solid black;
   cursor: pointer;
}
<div id="clickme">Click Me -<br>
   (this box has margin-left: 100px; margin-top: 20px;)</div>
load more v
72%

You can use the jQuery event.pageX and event.pageY in combination with the jQuery offset() method to get the position of mouse pointer relative to an element.,How to get the position of an element relative to the parent using jQuery,How to get the position of an element relative to the document using jQuery,How to find mouse position relative to the document using jQuery

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Coordinates of Mouse Pointer</title>
<style>
    #box{
        width:400px;
        height:300px;
        background: #f2f2f2;
        border: 1px solid #000;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function() {
        $("#box").mousemove(function(event){            
            var relX = event.pageX - $(this).offset().left;
            var relY = event.pageY - $(this).offset().top;
            var relBoxCoords = "(" + relX + "," + relY + ")";
            $(".mouse-cords").text(relBoxCoords);
        });
    });
</script>
</head>
<body>
    <div id="box"></div>
    <p>Coordinates of mouse pointer with respect to the DIV box are: <strong class="mouse-cords"></strong></p>
</body>
</html>
65%

// e = Mouse click event.
let rect = e.target.getBoundingClientRect();
let x = e.clientX - rect.left; //x position within the element.
let y = e.clientY - rect.top; //y position within the element.
75%

Instantly share code, notes, and snippets.

nice work, except that var curleft = curtop = 0; actually makes curtop a global variable, so it's better to write var curleft, curtop = curleft = 0;

var curleft = curtop = 0;
load more v
40%

The CSS used for this example is shown below., The HTML is simple; the box we'll be watching for mouse events on is given the class "box". It has two <span> elements, one with the ID "x" and one with the ID "y". Those will be updated each time an event occurs to contain the latest mouse coordinates relative to the page. , updateDisplay() replaces the contents of the <span> elements meant to contain the X and Y coordinates with the values of pageX and pageY. ,You can also see an example that demonstrates how to access the mouse position information in every available coordinate system.

var pageX = MouseEvent.pageX;
load more v
22%

You can use the jQuery event.pageX and event.pageY in combination with the jQuery offset() method to get the position of mouse pointer relative to an element., How to get the position of an element relative to the document using jQuery Use the jQuery&nbsp;offset()&nbsp;method... ,How to get the position of an element relative to the document using jQuery, How to combine two strings in PHP Use the PHP Concatenation Operator Yo...

Let's take a look at the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Coordinates of Mouse Pointer</title>
<style>
    #box{
        width:400px;
        height:300px;
        background: #f2f2f2;
        border: 1px solid #000;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    $(document).ready(function() {
        $("#box").mousemove(function(event){            
            var relX = event.pageX - $(this).offset().left;
            var relY = event.pageY - $(this).offset().top;
            var relBoxCoords = "(" + relX + "," + relY + ")";
            $(".mouse-cords").text(relBoxCoords);
        });
    });
</script>
</head>
<body>
    <div id="box"></div>
    <p>Coordinates of mouse pointer with respect to the DIV box are: <strong class="mouse-cords"></strong></p>
</body>
</html>
60%

If you're trying to get the mouse position on a page inside a scrolling pane:,To get the mouse position on a far away position deep in the scrolling.,And if you ever need to know the current Y scrolling position of page :,I want to make a little painting app using canvas. So I need to find the mouse's position on the canvas.

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;
load more v

Other "mouse-position" queries related to "Find mouse position relative to element"