How to get the MouseEvent coordinates for a element that has CSS3 Transform?

I want to detectwhereAMouseEventhave occurred, incoordinates relative to the clicked element. Why? Because I want to add a absolutely positioned child element at the clicked location.

I know how to detect it when the No CSS3 transformations exist (see description below). However, when I add a CSS3 Transform, then my algorithm breaks, and I don ' t know how to fix it.

I am not using the any JavaScript library, and I want to understand how things work in plain JavaScript. So, please, don ' t answer with "just use JQuery".

By the to, I want a solution that works for all mouseevents, not just "click". Not this it matters, because I believe all mouse events share the same properties, thus the same solution should work for All of them.

Background Information

According to DOM Level 2 specification, a have MouseEvent few properties related to getting the event coordinates:

• screenx  and screeny  return the screen coordinates (the origin is the top-left corner of user ' s monitor)
• clientx  and clienty  return the coordinates relative the document viewport.

thus, in order to find the position of The mouseevent  relative to the clicked element content, I must does this math:

ev.clientx-this.getboundingclientrect (). Left-this.clientleft + this.scrollLeft  

• ev.clientx  is the coordinate relative to the document viewport
• this.getboundingclientrect (). Left  is The position of the element relative to The document Viewport
• this.clientleft  is the amount of border (and scrollbar) between the element Boundary and the inner coordinates
• this.scrollLeftis the amount of scrolling inside the element

getBoundingClientRect(),clientLeftandscrollLeftis specified at CSSOM View Module.

Experiment without CSS Transform (it works)

confusing? try The following piece of JavaScript and HTML. Upon clicking, a red dot should appear exactly where the click has happened. This version was "quite simple" and works as expected.

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>

Experiment Adding a CSS Transform (it fails)

now, try Adding a 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 for more complex ones, as described below. */}

the algorithm doesn ' t know about the transformations, and thus calculates a wrong positi On. What's more, the results is different between Firefox 3.6 and Chrome 12. Opera 11.50 behaves just like Chrome.

In this example, the only transformation is scaling, so I could multiply the scaling factor to calculate the correct coor Dinate. However, if we think about arbitrary transformations (scale, rotate, skew, translate, matrix), and even nested Transformat Ions (a transformed element inside another transformed element), then we really need a better it to calculate the Coordin Ates.

How to get the MouseEvent coordinates for a element that has CSS3 Transform?