Cross-browser solution for replacing the use of event.layerX and event.layerY

Question

I'm trying to adapt some code from a simple app that uses Raphael to allow users to draw circles and rectangles on a canvas. (original code at https://gist.github.com/673186)

The original code used an older version of jQuery and worked fine. See http://jsfiddle.net/GHZSd/

Using an updated version of jQuery, however, breaks the example. See http://jsfiddle.net/GHZSd/1/

The reason for this is that event.layerX and event.layerY are no longer defined in the new version of jQuery. My question is - what code I can use to replace those values? I've tried a couple things just by doing some math (event.originalEvent.layerX/layerX still exist for now so I'm just trying to add/subtract some stuff that will result in those values) but so far what works on one browser doesn't work on all of them.

Sorry if this has been asked before but I wasn't able to find a concrete answer on Stack Overflow or anywhere else.

Ciel

Welcome to the joys of library dependency. You can just stay with the older jQuery (why are you upgrading?) or find out how layers were implemented in the older version and re-implement them in the newer one. – Sadden

I don't understand why you don't use the original events, it works fine : jsfiddle.net/GHZSd/19 – Auraaural

@Sadden - I need an updated version of jQuery for other elements of my project. – Ciel

@mdi - That still throws the following warning: 'event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.' Doesn't seem like a great longterm solution. – Ciel

I kinda doubt the Chrome team will dump layerX and layerY, since the Mozilla team don't seem to want it, but yes, that may be a problem :) – Auraaural

Answer 1

So, i thought a little about this problem, since the Chrome team wants to remove layerX and layerY for strange reasons.

First, we need the position of your container :

var position = $paper.offset();

(for those reading without the fiddle opened, $paper is the div where the svg will be drawn)

It gives us two coords, position.top and position.left, so we know where in the page is the container.

Then, on click, we use e.pageX and e.pageY, which are the coords of the page. To emulate layerX and layerY, we use (e.pageX - position.left) and (e.pageY - position.top)

Et voilà : http://jsfiddle.net/GHZSd/30/

Works on chrome, Safari, FF and Opera.

Auraaural

Yeah that works. I came to a similar solution. One weird thing is that, while this works fine in the example I posted, in my app that I'm working on there is a 1 pixel difference for both the X and Y when using Chrome. Not a big deal and there are some other properties in there that I can add to the equation to make everything equal to originalEvent.layerX/layerY in all browsers. So not sure if this is the best approach but it seems to work... – Ciel

Answer 2

const bbox = e.target.getBoundingClientRect();
const x = e.clientX - bbox.left;
const y = e.clientY - bbox.top;

Helban

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – Osteomalacia