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
jQuery show input text inside div after on click event JavaScript HTML5 Validation for name and email field JavaScript convert string variable in boolean using Regex How to show hide option list items using jQuery? jQuery move multi select values from one to another multi select list How to define Global Variable in JavaScript? Example to take user input and display on screen using JavaScript How can I redirect the user from one page to another using jQuery or pure JavaScript? jQuery simple form validations between start date and end date How to the length of the longest word in the provided sentence?