Comment trouver la position de la souris par rapport à un élément en jQuery

juillet 2, 2019février 10, 2020 Amine KOUIS 1 Commentaire

Vous pouvez utiliser event.pageX et event.pageY de jQuery en combinaison avec la méthode offset() de jQuery pour obtenir la position de la souris par rapport à un élément. Voici un exemple:

Code source :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Trouver la position de la souris par rapport à un élément</title>
		<style type="text/css">
			#myDiv{
				 border: 1px solid black;
				 background: gray;
				width:300px;
				height:200px;
			}
		</style>
		<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("#myDiv").mousemove(function(event){            
					var X = event.pageX - $(this).offset().left;
					var Y = event.pageY - $(this).offset().top;
					$(".cordn").text("(" + X + "," + Y + ")");
				});
			});
		</script>
	</head>
	<body>
		<div id="myDiv"></div>
		<p>Les coordonnées de la souris par rapport au bloc DIV sont: <b class="cordn"></b></p>
	</body>
</html>