ISSUE-136: Consider adding MouseEvent.getCoordsAt(element)


Consider adding MouseEvent.getCoordsAt(element)

HISTORICAL: DOM3 Events [All Bugs and Issues use Bugzilla:]
Raised by:
Doug Schepers
Opened on:
Jonathan Watt <>:

Positioning elements based off the position of a pointer event is regularly
tripping people up in SVG, and with the advent of CSS-transforms, I imagine also
in HTML.

To position an element based off the position of a pointer event you need to get
the coordinates of the event in the local coordinate system of the element. To
do that currently authors have to get the *correct* element-to-root transform,
invert it, create an SVGPoint, copy the event coordinates to the SVGPoint, then
use the inverted transform to transform the point and read back the coordinates.
For something so simple, it's not obvious that this is what you need to do, or
even how to do it.


To make life easier for authors I'd like to propose the addition of a
'getCoordsAt' method to the MouseEvent interface. This method would be passed
the element at which the local coordinates of the event are required, and return
an object implementing the SVGPoint interface[1] (or a new interface
implementing 'x' and 'y' properties).

I've uploaded a JavaScript implemented demo of this method here:

See also the comments in the source code.

// This is a demonstration of getCoordsAt() - a proposed addition to the DOM
// interface 'MouseEvent' - that would save authors from having to work with
// matrices when positioning elements based on the location of a pointer event.
// This file demonstrates getCoordsAt for SVG only, but it would be just as
// useful in HTML, especially with the advent of CSS-transforms.

// JavaScript implementation of getCoordsAt for SVG:

if (!MouseEvent.prototype.getCoordsAt) {
MouseEvent.prototype.getCoordsAt = function(element) {
var SVGNS = '';
var svg = document.createElementNS(SVGNS, 'svg');
var pt = svg.createSVGPoint();
pt.x = this.clientX;
pt.y = this.clientY;
return pt.matrixTransform(element.getScreenCTM().inverse());
Related Actions Items:
No related actions
Related emails:
  1. Re: ISSUE-136 (getCoordsAt): Consider adding MouseEvent.getCoordsAt(element) (from on 2011-04-08)
  2. Re: ISSUE-136 (getCoordsAt): Consider adding MouseEvent.getCoordsAt(element) (from on 2011-04-08)
  3. Re: Agenda: DOM3 Events Telcon, 12 October 2010 (from on 2010-10-13)
  4. Re: Agenda: DOM3 Events Telcon, 12 October 2010 (from on 2010-10-12)
  5. Agenda: DOM3 Events Telcon, 21 April 2010 (from on 2010-10-12)
  6. ISSUE-136 (getCoordsAt): Consider adding MouseEvent.getCoordsAt(element) (from on 2010-10-06)
  7. Re: [DOM Level 3 Events] MouseEvent.getCoordsAt(element) [ISSUE-136] (from on 2010-10-05)

Related notes:


Doug Schepers, 6 Oct 2010, 02:01:18

RESOLUTION: while useful, this API is not specific to mouse events and instead should be considered for another spec like CSSOM-Views.

Jacob Rossi, 8 Apr 2011, 23:38:55

Display change log ATOM feed

Chair, Staff Contact
Tracker: documentation, (configuration for this group), originally developed by Dean Jackson, is developed and maintained by the Systems Team <>.
$Id: 136.html,v 1.1 2016/01/25 10:26:15 carine Exp $