JavaScript – clickable area example.

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>
<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;
<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);
<div id= “clickable_area”>a click area</div>

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.