<!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
JavaScript HTML5 Validation for name and email field
Generate random password for form field on click using JavaScript
What's the difference between let and var?
How to show hide option list items using jQuery?
Example to take user input and display on screen using JavaScript
How to define Global Variable in JavaScript?