<!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 scroll page to 1000px from top on page load using jQuery?
ES6 method of declaration multiple variables in one line
JavaScript HTML5 Validation for name and email field
Example to take user input and display on screen using JavaScript
How to show hide option list items using jQuery?
Image Rollover Using onMouseOver and onMouseOut