En javascript, dans le gestionnaire d'événements javascript pour onMouseMove comment puis-je obtenir la position de la souris dans x, y corrdates par rapport au haut de la page?onMouseMove obtenir la position de la souris
Répondre
si vous pouvez utiliser jQuery, puis this aiderai:
<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>
ici est pur javascript seul exemple:
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;
}
hmm, js exemple ressemble beaucoup à http: // www.codelifter.com/main/javascript/capturemouseposition1.html sauf sans les commentaires pratiques – RozzA
'id =" # divA "' et '$ (" divA ")' - quelqu'un était endormi en écrivant ceci – RozzA
@RozzA merci de faire attention. – TheVillageIdiot
Surtout avec les événements mousemove, que le feu rapide et furieux, il est bon de réduire les manipulateurs 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 = fonction (e) {alert (whereAt (e))};
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*)
. Ci-dessous un exemple de faire 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]
. Cela est extrêmement pratique, car vous pouvez obtenir les coordonnées de la souris par rapport à n'importe quel conteneur en échangeant 'html'
avec l'étiquette (par exemple 'body'
), le nom de classe (par exemple '.class_name'
) ou id (par exemple '#element_id'
).
+1, mais ** Avertissement juste **: Cette approche est un peu trop lent pour une utilisation contre 'onmousemove'. J'avais déjà d3.js dans mon projet, donc je l'ai essayé, mais ce n'est pas assez rapide pour mon cas d'utilisation. – elrobis
C'est essayé et fonctionne dans tous les navigateurs:
function getMousePos(e) {
return {x:e.clientX,y:e.clientY};
}
Maintenant, vous pouvez l'utiliser dans un événement comme celui-ci:
document.onmousemove=function(e) {
var mousecoords = getMousePos(e);
alert(mousecoords.x);alert(mousecoords.y);
};
- 1. Comment obtenir la position de la souris?
- 2. Oncroll Javascript et position de la souris
- 3. Obtenir la position de la souris pendant le glisser-déposer
- 4. Cocoa: Obtenir la position actuelle de la souris sur l'écran
- 5. C# - Déplacer un contrôle à la position de la souris
- 6. Réglage de la position de la souris
- 7. XLib Lock Position de la souris (habillage de la souris)
- 8. Obtenir la position d'un clic de souris dans un QLabel
- 9. div Position à la souris
- 10. Problème de position de la souris Javascript
- 11. Javascript: Est-il possible d'obtenir la position de la souris en dehors d'un gestionnaire d'événements?
- 12. JTable Défilement par position de la souris
- 13. Obtenir la position de la souris par rapport à la grille défilante
- 14. Recherche de la position actuelle de la souris dans QT
- 15. images se déplacent dépendamment de la position de la souris
- 16. Vitesse de défilement avec la position de la souris
- 17. Obtenir la position de la souris en fonction de l'endroit où l'utilisateur clique
- 18. Comment stocker (et utiliser) la position actuelle de la souris?
- 19. Flash CS4, position de la tête d'image suivant la souris
- 20. Comment définir la position de la souris en Java?
- 21. Zoom sur la position de la souris dans OpenGl
- 22. richfaces comment détecter la position de la souris
- 23. Zoom sur la position de la souris avec une traduction?
- 24. Pyqt obtenir la position du pixel et la valeur lorsque la souris cliquez sur l'image
- 25. obtenir la position de l'élément
- 26. Obtenir la position de pdfptable
- 27. Obtenir la position de JPopupMenu
- 28. jQuery Définir la position de la souris (pas la position du curseur)
- 29. Voir si le bouton gauche de la souris est maintenu enfoncé dans l'événement OnMouseMove
- 30. Obtenir la position/le bouton de la souris sur l'événement DoubleClick
double possible de [Comment obtenir la position de la souris dans jQuery sans souris -events?] (http://stackoverflow.com/questions/4517198/how-to-get-mouse-position-in-jquery-without-mouse-events) – Lucio