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

Question

I want to detect where a MouseEvent has occurred, in coordinates relative to the clicked element. Why? Because I want to add an absolutely positioned child element at the clicked location.

I know how to detect it when 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'm not using 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 way, I want a solution that works for all MouseEvents, not just "click". Not that 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 MouseEvent has 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 do 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.scrollLeft is the amount of scrolling inside the element

getBoundingClientRect(), clientLeft and scrollLeft are 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 is "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 about more complex ones, as described below. */
}

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

In this example, the only transformation was scaling, so I could multiply the scaling factor to calculate the correct coordinate. However, if we think about arbitrary transformations (scale, rotate, skew, translate, matrix), and even nested transformations (a transformed element inside another transformed element), then we really need a better way to calculate the coordinates.

Answer 1

The behaviour you are experiencing is correct, and your algorithm isn't breaking. Firstly CSS3 Transforms are designed not to interfere with the box model.

To try and explain...

When you apply a CSS3 Transform on an element. the Element assumes a kind of relative positioning. In that the surrounding elements are not effected by the transformed element.

e.g. imagine three div's in a horizontal row. If you apply a scale transform to decrease the size of the centre div. The surrounding div's will not move inwards to occupy the space that was once occupied the transformed element.

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

So in the box model, the element does not actually change size. Only it's rendered size changes.

You also have to keep in mind that you are applying a scale Transform, so your elements "real" size is actually the same as it's original size. You are only changing it's perceived size.

To explain..

Imagine you create a div with a width of 1000px and scale it down to 1/2 the size. The internal size of the div is still 1000px, not 500px.

So the position of your dots are correct relative to the div's "real" size.

I modified your example to illustrate.

Instructions

1. Click the div and keep you mouse in the same position.
2. Find the dot in the wrong position.
3. Press Q, the div will become the correct size.
4. Move your mouse to find the dot in the correct position to where you clicked.

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

So in order to make the mouse clicks co-ordinates match the visible location on the div, you need to understand that the mouse is giving back co-ordinates based on the window, and your div offsets are also based on its "real" size.

As your object size is relative to the window the only solution is to scale the offset co-ordinates by the same scale value as your div.

However this can get tricky based on where you set the Transform-origin property of your div. As that is going to effect the offsets.

See here.

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

Hope this helps.