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

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>
Résultat

Les coordonnées de la souris par rapport au bloc DIV sont:

QCM jQueryQCM jQuery – Partie 1QCM sur jQuery avec des réponses pour la préparation des test techniques, des tests en ligne, aux examens et aux certifications. Ces questions et réponses…Lire plus
Partagez cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *