<!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
Write a function that splits an array into groups the length of size and returns them as a two-dimensional array
JavaScript example to change image on click
jQuery simple form validations between start date and end date
How to change text after click event using JavaScript?
Check if a string ends with the given target string
How to join string with number in JavaScript?