title: getting mouse position relative to content area of an element
body: <p>When the mouse is moved over an element, I want to get the mouse coordinates of the cursor relative to the top-left of the element's content area (this is the area excluding padding, border and outline). Sounds simple, right? What I have so far is a very popular function:</p>
  
  <pre><code>function element_position(e) {
      var x = 0, y = 0;
      do {
          x += e.offsetLeft;
          y += e.offsetTop;
      } while (e = e.offsetParent);
      return { x: x, y: y };
  }
  </code></pre>
  
  <p>And I'd get the mouse position relative to an element <code>element</code> with:</p>
  
  <pre><code>p = element_position(element);
  x = mouseEvent.pageX - p.x;
  y = mouseEvent.pageY - p.y;
  </code></pre>
  
  <p>That isn't quite correct. Because the <code>offsetLeft</code> and <code>offsetTop</code> are the differences between the 'outer' top left of an element and the 'inner' top left of its offset parent, the sum position will skip over <strong>all</strong> borders and paddings in the hierarchy.</p>
  
  <p>Here's a comparison that should (hopefully) clarify what I mean.</p>
  
  <ul>
  <li>If I get the sum of the distances in position between the 'outer' top left of the elements and the 'inner' top left of their offset parents (<strong>outers minus inners</strong>; what I am doing right now), I get the element's content area's position, minus all the borders and paddings in the offset hierarchy.</li>
  <li>If I get the sum of the distances in position between the 'outer' top left of the elements and the 'outer' top left of their offset parents (<strong>outers minus outers</strong>), I get the element's content area's position, minus the border and padding of the desired element (close, but not quite there).</li>
  <li>If I get the sum of the distances in position between the 'inner' top left of the elements and the 'inner' top left of their offset parents (<strong>inners minus inners</strong>), I get the element's content area's position. This is what I want.</li>
  </ul>