event.pageX
and event.pageY
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.
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>
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
Failed to clear cache. Make sure you have the appropriate permissions in Laravel
Hi, Hello Laravel artisan. this is...How To Create a Web Server in Node.js with the HTTP Module
Node.js has built-in HTTP module to tran...How to Upload Image in Laravel 8 using Summernote Editor
Summernote editor is a simple Javascript...How to Update the Node Version in Ubuntu
In this article i will share with you ho...How to get the value of a textarea in jQuery
Use the jQuery val() method You can u...