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? How to get selected text from a select box using jQuery? How to change text after click event using JavaScript? JavaScript convert string variable in boolean using Regex jQuery simple form validations between start date and end date Highlight and get the details of table row on click using JavaScript