This example uses a simple way to see the mouse position.
The area where you make click with the mouse.
You have two variables: mouseXPos, mouseYPos.
The function(e) take the mouse position and show the result.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src=”../js/jquery-2.2.0.js”></script>
<style type=”text/css”>
html, body { text-align: center; }
div {
background: grey;
cursor: pointer;
display: inline-block;
font-size: 3em;
margin: 2em auto;
padding: 2em;
}
p {
background: grey;
padding: 1em;
}</style>
<script type=”text/javascript”>
window.mouseXPos = 0;
window.mouseYPos = 0;
$(function() {
$(document).on(‘click’, ‘#clickable_area’, function(e) {
mouseXPos = e.pageX;
mouseYPos = e.pageY;
$(‘p’).text(mouseXPos + ‘:’ + mouseYPos);
});
})
</script>
</head>
<body>
<p>Results</p>
<div id= “clickable_area”>a click area</div>
</body>
</html>