Comment obtenir la position du clic de la souris en JavaScript ? Résumé de trois méthodes pour obtenir

En fait, nous avons traité d'éléments dans le DOM. C'est aussi un aspect courant de l'interaction avec les téléphones mobiles. Cependant, de nombreux programmeurs sont déçus. Parlons-en ci-dessous. regardez comment utiliser js pour obtenir la position du clic de la souris et résumez un didacticiel détaillé pour vous.

1 : La souris est relative à l'écran

Si on implique l'emplacement du clic de la souris, c'est relativement simple , nous pouvons obtenir Après les clics de souris, screenX et screenY sont utilisés pour déterminer l'emplacement approximatif du clic, déterminant ainsi la position relative par rapport aux marges supérieure et inférieure de l'écran. Nous ne considérons pas des facteurs tels que l'iframe, mais les performances. est toujours le même dans les différents navigateurs.

Exemple :

function getMousePos(event) {             
     var e = event || window.event;             
      return {'x':e.screenX,'y':screenY}  
}

2 : Souris par rapport à la fenêtre du navigateur

Si la position est déterminée via le code simple ci-dessus, souvent ces Ce n'est pas suffisant, car en général, il faut obtenir les coordonnées de la souris par rapport à la fenêtre du navigateur, et respectivement obtenir la marge supérieure et la marge gauche de la souris par rapport à la fenêtre, qui peuvent être représentées par clientX et clientY.

Par exemple :

function getMousePos(event) {              
     var e = event || window.event;              
     return {'x':e.clientX,'y':clientY} 
}

3 : Souris par rapport au document

On peut utiliser clientX et clientY pour obtenir les coordonnées du document actuel fenêtre du navigateur, Mais ces conditions sont limitées. Lorsque la page défile, que dois-je faire des coordonnées relatives au document A ce stade, il suffit d'ajouter le déplacement de défilement ?

Par exemple :

function getMousePos(event) {
    var e = event || window.event;
    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    var x = e.pageX || e.clientX + scrollX;
    var y = e.pageY || e.clientY + scrollY;
    //alert('x: ' + x + '\ny: ' + y);
    return { 'x': x, 'y': y };
}

Le problème actuel avec Firefox sera beaucoup plus simple, car Firefox prend en charge les deux attributs pageX et pageY, et a déjà pris en compte le défilement des pages.

Ce qui précède explique comment obtenir la position du clic de souris en JavaScript ? Obtenez une introduction complète aux trois méthodes. Si vous souhaitez en savoir plus sur les Tutoriels vidéo JavaScript, veuillez faire attention au site Web php chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!