Introduction

In this article, I explain how to get the cursor's location in jQuery.

First we download the file and then add it in our project; see:

Jquery-1.8.2.js

Use the following procedure.

Step 1

Open Visual Studio 2012 and click "File" -> "New" -> "Web Site...". A window is opened. In this window, click "Empty Web Site" under Visual C#.

Give the name of your application as "Cursor_Location" and then click "Ok". Then add "HTML page" and write the following code.

Program Coding

Cursor_Location.htm

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="jquery-1.8.2.js"></script>

<script type="text/javascript">

$(function ()

{

$(document).mousemove(function (e)

{

$('#lblXAxis').html("Cursor X Axis: "+e.pageX+"<br>")

})

})

$(function ()

{

$(document).mousemove(function (e1)

{

$('#lblYAxis').html("Cursor Y Axis: "+e1.pageY)

})

})

</script>

</head>

<body>

<form id="form1" runat="server">

<h3 style="color: #0000FF; font-size: x-large">Cursor Location in Jquery</h3>

<input id="Button1" type="button" value="Mouseover for Get Cursor Location" />

<br />

<br />

<div>

<label id="lblXAxis" style="font-weight: bold; font-size: large" />

</div>

<label id="lblYAxis" style="font-weight: bold; font-size: large" />

</form>

</body>

</html>


Output

output.jpg


For more information, download the attached sample application.