Récupérer la position de la souris

Comment connaitre la position de la souris dans la page

position souris, javascript position souris, javascript souris position, position javascript, javascript mouse position, mouse position javascript, javascript coordonnees souris, evenement souris javascript, coordonnees souris javascript, recuperer la position de la souris, javascript recuperer souris, position de la souris javascript, recuperer position curseur, documentelement scrollleft javascript, document documentelement javascript

Date de publication : 2009-01-26

Pour récupérer la position de la souris dans la page je vous vous propose la fonction getMousePosition :


/**
* @author Patrick Poulain
* @see http://petitchevalroux.net
* @licence GPL
*/
function getMousePosition(event)
{
	var e = event || window.event;
	var scroll = new Array((document.documentElement && document.documentElement.scrollLeft) || window.pageXOffset || self.pageXOffset || document.body.scrollLeft,(document.documentElement && document.documentElement.scrollTop) || window.pageYOffset || self.pageYOffset || document.body.scrollTop);;
	return new Array(e.clientX + scroll[0] - document.body.clientLeft,e.clientY + scroll[1] - document.body.clientTop);
}

Article en relation : Position d'un élément dans la page

Pour utiliser cette fonction il est nécessaire sur certain navigateur de passer l'événement source de l'action. voici un petit exemple permettant d'afficher la position dans la souris dans une page.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Position de la souris</title>
</head>
<body>
<script type="text/javascript">
function getMousePosition(event)
{
	var e = event || window.event;
	var scroll = new Array((document.documentElement && document.documentElement.scrollLeft) || window.pageXOffset || self.pageXOffset || document.body.scrollLeft,(document.documentElement && document.documentElement.scrollTop) || window.pageYOffset || self.pageYOffset || document.body.scrollTop);;
	return new Array(e.clientX + scroll[0] - document.body.clientLeft,e.clientY + scroll[1] - document.body.clientTop);
}
</script>
<div id="mouseInfo" style="width:400px;height:300px;background:red"></div>
<script type="text/javascript">
var mouseInfo = document.getElementById('mouseInfo');
mouseInfo.onmousemove = function(event){
	var mouseInfo = document.getElementById('mouseInfo');
	var mousePosition = getMousePosition(event);
	mouseInfo.innerHTML = 'x:'+mousePosition[0] + 'y:'+mousePosition[1];
};
</script>
</body>
</html>