En javascript, dans le gestionnaire d'événements javascript pour onMouseover, comment puis-je obtenir la position de la souris en coordonnées x, y par rapport au haut de la page?
si vous pouvez utiliser jQuery, alors this vous aidera:
<div id="divA" style="width:100px;height:100px;clear:both;"></div>
<span></span><span></span>
<script>
$("#divA").mousemove(function(e){
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);
$("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);
});
</script>
voici un exemple pur javascript:
var tempX = 0;
var tempY = 0;
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else { // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}
document.Show.MouseX.value = tempX;//MouseX is textbox
document.Show.MouseY.value = tempY;//MouseY is textbox
return true;
}
Il peut être un peu exagéré d'utiliser d3.js juste pour trouver les coordonnées de la souris, mais ils ont une fonction très utile appelée d3.mouse(*container*)
. Voici un exemple de ce que vous voulez faire:
var coordinates = [0,0];
d3.select('html') // Selects the 'html' element
.on('mousemove', function()
{
coordinates = d3.mouse(this); // Gets the mouse coordinates with respect to
// the top of the page (because I selected
// 'html')
});
Dans le cas ci-dessus, la coordonnée x serait coordinates[0]
, et la coordonnée y serait coordinates[1]
. C'est extrêmement pratique, car vous pouvez obtenir les coordonnées de la souris par rapport à n'importe quel conteneur que vous souhaitez en échangeant 'html'
avec le tag (par exemple 'body'
), nom de la classe (par exemple '.class_name'
) ou id (par exemple '#element_id'
).
Ceci est essayé et fonctionne dans tous les navigateurs:
function getMousePos(e) {
return {x:e.clientX,y:e.clientY};
}
Vous pouvez maintenant l'utiliser dans un événement comme celui-ci:
document.onmousemove=function(e) {
var mousecoords = getMousePos(e);
alert(mousecoords.x);alert(mousecoords.y);
};
Surtout avec les événements de déplacement de souris, qui se déclenchent rapidement et furieusement, il est bon de réduire les gestionnaires avant de les utiliser-
var whereAt= (function(){
if(window.pageXOffset!= undefined){
return function(ev){
return [ev.clientX+window.pageXOffset,
ev.clientY+window.pageYOffset];
}
}
else return function(){
var ev= window.event,
d= document.documentElement, b= document.body;
return [ev.clientX+d.scrollLeft+ b.scrollLeft,
ev.clientY+d.scrollTop+ b.scrollTop];
}
})()
document.ondblclick = function (e) {alert (whereAt (e))};