Golang React JS Technology Blog

jQuery get the coordinates of div clicked 

<!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 particular Div on click using jQuery? Highlight and get the details of table row on click using JavaScript jQuery simple form with name and email validations How to scroll page to 1000px from top on page load using jQuery? JavaScript sort multi dimensional array on specific columns How to the length of the longest word in the provided sentence?