<!DOCTYPE html>
<html>
<head>
<style>
.clickable {
border: 1px solid #333;
background: #eee;
height: 200px; width: 200px;
margin: 15px;
position: absolute;
}
.display {
display: block;
height: 16px;
position: absolute;
text-align: center;
vertical-align: middle;
width: 100%;
top: 50%; margin-top: -8px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function($) {
$('.clickable').bind('click', function (ev) {
var $div = $(ev.target);
var $display = $div.find('.display');
var offset = $div.offset();
var x = ev.clientX - offset.left;
var y = ev.clientY - offset.top;
$display.text('x: ' + x + ', y: ' + y);
});
});
</script>
</head>
<body>
<div class='clickable'>
<span class='display'></span>
</div>
</body>
</html> Most Helpful This Week
How to check a variable is undefined in JavaScript?
How to declare and print value of variable in JavaScript?
How to scroll page to particular Div on click using jQuery?
Image Rollover Using onMouseOver and onMouseOut
jQuery example of scroll to top
How can I redirect the user from one page to another using jQuery or pure JavaScript?