Connaissance HTML - souris, coordonnées des éléments et propriétés de l'objet ClientRect

Dans cet article, nous présenterons les coordonnées de la souris, les coordonnées des éléments et les coordonnées de la souris dans les éléments spécifiés.

1. Coordonnées de la souris

Lorsqu'un événement lié ​​à la souris est déclenché (tel que : clic, déplacement de la souris), les coordonnées actuelles de la souris peuvent être obtenues via l'événement objet coordonnée.

Les coordonnées obtenues peuvent être divisées en 2 types :

1) MouseEvent.screenX, MouseEvent.screenY : basé sur X et Y coordonnées de l'écran ; Prendre le coin supérieur gauche de l'écran comme point de départ de 0,0.

2) MouseEvent.clientX, MouseEvent.clientY : basé sur les coordonnées X, Y du corps ; Prendre le coin supérieur gauche du corps actuel comme point de départ de 0,0 Si le corps contient une barre de défilement horizontale ou une barre de défilement verticale, le coin supérieur gauche est toujours le 0. ,0 point de coordonnées.

2. Les coordonnées de l'élément

La méthode getBoundingClientRect() de l'élément peut obtenir un objet ClientRect, qui décrit l'orientation, la largeur et la hauteur de l'élément.

2.1 Objet ClientRectPropriétés

tr> tbody>

Nom de la propriété

Description de la propriété

width

属性名称	属性说明
width	元素的宽度
height	元素的高度
left	元素左上角距离当前可视body的宽度
top	元素左上角距离当前可视body的高度
right	元素右下角距离当前可视body的宽度；right = left + width
bottom	元素右下角距离当前可视body的高度；bottom = top + height

élément La largeur de

hauteur

td >

La hauteur de l'élément

left

La largeur du coin supérieur gauche de l'élément à partir du corps actuellement visible

top

La hauteur du coin supérieur gauche de l'élément à partir du corps actuellement visible

right

La largeur à partir du coin inférieur droit de l'élément vers le corps actuellement visible ; droite = gauche + largeur

bottom

La hauteur du coin inférieur droit de l'élément à partir du corps visible actuel ; bottom = top + height

2.2 Illustration

2.3 Autres coordonnées

En plus de ces attributs directs, vous pouvez également combiner d'autres éléments pour obtenir des coordonnées plus détaillées :

1) Le coin supérieur gauche de l'élément est à la coordonnée horizontale de tout le corps

= document.body .scrollLeft + element.getBoundingClientRect().left;

2) Le coin supérieur gauche de l'élément est à la coordonnée verticale de

tout le corps

= document.body.scrollTop + élément. getBoundingClientRect().top;

3. Les coordonnées de la souris dans l'élément

Après avoir obtenu les coordonnées de la souris et les coordonnées de l'élément comme appris précédemment, et peut en outre obtenir les coordonnées de la souris à l'intérieur l'élément.

En prenant comme exemple la coordonnée x de la souris dans l'élément, elle est égale au clientX de la souris moins la valeur gauche de getBoundingClientRect() de l'élément, et ajoute enfin la valeur du scrollLeft de l'élément.

La formule est la suivante

:

x

= mouse.clientX - element.left + element.scrollLeft

y = mouse.clientY - element.top + element.scrollTop

Exemple

[Recommandations associées] 1.

Recommandation spéciale

 : Téléchargement de la version "php Programmer Toolbox" V0.12. Tutoriel vidéo

3

Tutoriel vidéo html5 original php.cn

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!