Edit Question - KnowledgeHub

Title Body

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 scroll

Tags (comma-separated) Cancel