event.layerXとevent.layerYの使用を置き換えるためのクロスブラウザソリューション

Question

ラファエルを使用してキャンバス上に円と四角形を描くことができる、単純なアプリケーションからいくつかのコードを適用しようとしています。 （元のコードはhttps://gist.github.com/673186）

元のコードでは古いバージョンのjQueryを使用していましたが、うまくいきました。 http://jsfiddle.net/GHZSd/

ただし、更新されたバージョンのjQueryを使用すると、この例は破損します。 http://jsfiddle.net/GHZSd/1/

この理由は、event.layerXとevent.layerYが新しいバージョンのjQueryで定義されなくなったからです。私の質問は - 私はそれらの値を置き換えるために使用できるコードは何ですか？私はちょうどいくつかの数学（event.originalEvent.layerX/layerXはまだ存在するので、私はちょうどそれらの値になるいくつかのものを追加/減算しようとしている）しかし、これまでのところいくつかのことを試してきましたブラウザはすべてのブラウザで動作しません。

申し訳ありませんこれまでに尋ねられたことがありましたが、私はSOや他の場所で具体的な回答を見つけることができませんでした。

Answer 1

Chromeチームは、奇妙な理由でlayerXとlayerYを削除したいので、この問題について少し考えました。

まず、我々はあなたのコンテナの位置を必要とする：

var position = $paper.offset(); 

（フィドルずに読んでそれらのための$紙は、SVGが描画されるdiv要素である、開かれた）

それは私たちに2を与えますcoords、position.topとposition.leftなので、ページ内のどこにコンテナがあるかわかります。

クリックすると、e.pageXとe.pageYが使用されます。これはページの座標です。クロム、サファリ、FFとオペラhttp://jsfiddle.net/GHZSd/30/

作品：layerXとlayerYをエミュレートするために、我々は(e.pageX - position.left)と(e.pageY - position.top)

のEtほらを使用しています。