Comment obtenir les coordonnées du MouseEvent pour un élément qui a une transformation CSS3 ?

Question

Je veux détecter où a MouseEvent a eu lieu, en coordonnées relatives à l'élément cliqué . Pourquoi ? Parce que je veux ajouter un élément enfant positionné de manière absolue à l'emplacement cliqué.

Je sais comment le détecter lorsqu'il n'existe aucune transformation CSS3 (voir la description ci-dessous). Cependant, lorsque j'ajoute une transformation CSS3, mon algorithme se casse la figure et je ne sais pas comment le réparer.

Je n'utilise aucune bibliothèque JavaScript, et je veux comprendre comment les choses fonctionnent en JavaScript pur. Alors, s'il vous plaît, ne répondez pas par "utilisez simplement jQuery".

Au fait, je veux une solution qui fonctionne pour tous les MouseEvents, pas seulement pour le "click". Cela n'a pas d'importance, car je pense que tous les événements souris partagent les mêmes propriétés, donc la même solution devrait fonctionner pour tous.

---

Informations générales

Selon Spécification DOM niveau 2 , a MouseEvent possède quelques propriétés liées à l'obtention des coordonnées de l'événement :

• screenX et screenY retourne les coordonnées de l'écran (l'origine est le coin supérieur gauche de l'écran de l'utilisateur)
• clientX et clientY retourne les coordonnées relatives à la fenêtre du document.

Ainsi, afin de trouver la position de la MouseEvent par rapport au contenu de l'élément cliqué, je dois faire ce calcul :

ev.clientX - this.getBoundingClientRect().left - this.clientLeft + this.scrollLeft

• ev.clientX est la coordonnée relative à la fenêtre du document
• this.getBoundingClientRect().left est la position de l'élément par rapport à la fenêtre du document.
• this.clientLeft est la quantité de bordure (et de barre de défilement) entre la limite de l'élément et les coordonnées intérieures.
• this.scrollLeft est la quantité de défilement à l'intérieur de l'élément

getBoundingClientRect() , clientLeft et scrollLeft sont spécifiés à Module de visualisation du CSSOM .

Expérimenter sans CSS Transform (ça marche)

Confus ? Essayez le morceau suivant de JavaScript et HTML . En cliquant, un point rouge devrait apparaître à l'endroit exact où le clic s'est produit. Cette version est "assez simple" et fonctionne comme prévu.

function click_handler(ev) {
    var rect = this.getBoundingClientRect();
    var left = ev.clientX - rect.left - this.clientLeft + this.scrollLeft;
    var top = ev.clientY - rect.top - this.clientTop + this.scrollTop;

    var dot = document.createElement('div');
    dot.setAttribute('style', 'position:absolute; width: 2px; height: 2px; top: '+top+'px; left: '+left+'px; background: red;');
    this.appendChild(dot);
}

document.getElementById("experiment").addEventListener('click', click_handler, false);

<div id="experiment" style="border: 5px inset #AAA; background: #CCC; height: 400px; position: relative; overflow: auto;">
    <div style="width: 900px; height: 2px;"></div> 
    <div style="height: 900px; width: 2px;"></div>
</div>

Expérimenter l'ajout d'une transformation CSS (cela échoue)

Maintenant, essayez d'ajouter un CSS transform :

#experiment {
    transform: scale(0.5);
    -moz-transform: scale(0.5);
    -o-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    /* Note that this is a very simple transformation. */
    /* Remember to also think about more complex ones, as described below. */
}

L'algorithme ne connaît pas les transformations, et calcule donc une position erronée. De plus, les résultats sont différents entre Firefox 3.6 et Chrome 12. Opera 11.50 se comporte exactement comme Chrome.

Dans cet exemple, la seule transformation était la mise à l'échelle, je pouvais donc multiplier le facteur d'échelle pour calculer la bonne coordonnée. Cependant, si nous pensons aux transformations arbitraires (mise à l'échelle, rotation, inclinaison, translation, matrice), et même aux transformations imbriquées (un élément transformé à l'intérieur d'un autre élément transformé), alors nous avons vraiment besoin d'un meilleur moyen de calculer les coordonnées.

Answer 1

Le comportement que vous rencontrez est correct, et votre algorithme n'est pas en panne. Tout d'abord, les transformations CSS3 sont conçues pour ne pas interférer avec le modèle de boîte.

Pour essayer d'expliquer...

Lorsque vous appliquez une transformation CSS3 sur un élément, celui-ci adopte une sorte de positionnement relatif. En ce sens que les éléments environnants ne sont pas affectés par l'élément transformé.

Par exemple, imaginez trois div's dans une rangée horizontale. Si vous appliquez une transformation d'échelle pour diminuer la taille de la div centrale. Les div's environnantes ne se déplaceront pas vers l'intérieur pour occuper l'espace qu'occupait l'élément transformé.

exemple : http://jsfiddle.net/AshMokhberi/bWwkC/

Ainsi, dans le modèle de boîte, l'élément ne change pas réellement de taille. Seule la taille de son rendu change.

Vous devez également garder à l'esprit que vous appliquez une transformation d'échelle, de sorte que la taille "réelle" de votre élément est en fait la même que sa taille d'origine. Vous ne modifiez que sa taille perçue.

Pour expliquer

Imaginez que vous créez un div d'une largeur de 1000px et que vous le réduisez à la moitié de sa taille. La taille interne de la division est toujours de 1000px, et non de 500px.

La position de vos points est donc correcte par rapport à la taille "réelle" de la division.

J'ai modifié votre exemple pour illustrer.

Instructions

1. Cliquez sur la division et gardez votre souris dans la même position.
2. Trouvez le point dans la mauvaise position.
3. Appuyez sur Q, la division deviendra de la bonne taille.
4. Déplacez votre souris pour trouver le point dans la position correcte de l'endroit où vous avez cliqué.

http://jsfiddle.net/AshMokhberi/EwQLX/

Ainsi, pour que les coordonnées des clics de souris correspondent à l'emplacement visible de la division, vous devez comprendre que la souris renvoie des coordonnées basées sur la fenêtre, et que les décalages de votre division sont également basés sur sa taille "réelle".

Comme la taille de votre objet est relative à la fenêtre, la seule solution est de mettre à l'échelle les coordonnées du décalage par la même valeur d'échelle que votre division.

Cependant, cela peut devenir délicat en fonction de l'endroit où vous définissez la propriété Transform-origin de votre div. Car cela va affecter les décalages.

Voir ici.

http://jsfiddle.net/AshMokhberi/KmDxj/

J'espère que cela vous aidera.

Answer 2

Si l'élément est un conteneur et s'il est positionné de manière absolue ou relative, vous pouvez placer l'élément à l'intérieur de celui-ci, le positionner relativement au parent et largeur = 1px, hauteur = 1px, et le déplacer à l'intérieur du conteneur, et après chaque déplacement, utilisez document.elementFromPoint(event.clientX, event.clientY) =)))).

Vous pouvez utiliser la recherche binaire pour le rendre plus rapide. ça a l'air terrible, mais ça marche

http://jsfiddle.net/3VT5N/3/ - démo

Answer 3

Pour obtenir les coordonnées d'un MouseEvent par rapport à l'élément cliqué, utilisez offsetX / layerX .

Avez-vous essayé d'utiliser ev.layerX ou ev.offsetX ?

var offsetX = (typeof ev.offsetX == "number") ? ev.offsetX : ev.layerX || 0;

Voir aussi :

• Module CSSOM View : 9 Extensions de l'interface MouseEvent
• Mesures IE 8 clientX à partir du bord de remplissage de l'élément au lieu du bord du contenu : GTalbot MSIE 8 Browser Bugs : event.offsetX, event.offsetY comme coordonnées de la souris à l'intérieur du padding-box de l'élément cible
• MSDN : propriété offsetX

Answer 4

De même, pour Webkit webkitConvertPointFromPageToNode peut être utilisée :

var div = document.createElement('div'), scale, point;
div.style.cssText = 'position:absolute;left:-1000px;top:-1000px';
document.body.appendChild(div);
scale = webkitConvertPointFromNodeToPage(div, new WebKitPoint(0, 0));
div.parentNode.removeChild(div);
scale.x = -scale.x / 1000;
scale.y = -scale.y / 1000;
point = webkitConvertPointFromPageToNode(element, new WebKitPoint(event.pageX * scale.x, event.pageY * scale.y));
point.x = point.x / scale.x;
point.y = point.y / scale.x;

Answer 5

Une autre façon est de placer 3 divs dans les coins de cet élément, puis de trouver la matrice de transformation ... mais cela ne fonctionne que pour les éléments conteneurisables positionnés positionnés - 4esn0k

démo : http://jsfiddle.net/dAwfF/3/