javascriptでdiv内における座標をとるには

Question

###javascript でdiv内における座標をとるには
javascript でdiv内における座標をとるにはどうすればいいでしょう？

絶対的な座標(つまりbodyからとった座標)は以下のようにすればとれました。

document.body.addEventListener("mousemove", function(e){
    var x = e.pageX;
    var y = e.pageY;
　　//略
});

しかし諸事情により、「あるdivの中における座標」を取得する必要がでてきました。divの一番左上をx=0,y=0とするような座標です。

これは実現できるのでしょうか？どうか些細な情報でもよせていただけるとありがたいです・・・

一応私が考えたのは以下のようなコードです。(ここでは「あるdiv」のidを"folder"としてます。)
これは動きませんでしたが、何か解決の手がかりになればと思いのせておきます・・・よろしくお願いします。

document.body.addEventListener("load", function(e){//読み込んだときdivにリスナーをつける。
    var f =  document.querySelector("#folder");//あるdiv
    f.addEventListener("mousemove", function (e) {//あるdivに座標センサをつける。しかし動かない。
        var x = e.pageX;
        var y = e.pageY;
        //略
    });
});

Answer 1

こんにちは

ぱっと見で、思いつく修正としては、以下のようにするといかがでしょう？

修正前：

var x = e.pageX;
var y = e.pageY;
```　
　　　
**修正後：**
```javascript
var x = e.offsetX;
var y = e.offsetY;

Comments

[hood]

回答ありがとうございます！
ご指摘いただいた通り修正を試みたら上手くいきました！
offsetについてももっと詳しく調べていきたいと思います。返す返す感謝いたします！

[jun68ykt]

どういたしまして。解決されたようでよかったです ????

Answer 2

「動かない」というのは、loadイベントが発火しないということですか？
loadイベントはdocumentではなくwindowにセットしないといけなかったと思うのですが。

div上の相対座標は、jun68yktさんが回答してくださっている方法で取得できると思います。

Comments

[hood]

回答ありがとうございます！
>loadイベントはdocumentではなくwindowにセットしないといけなかった。
まったくその通りでした。修正したら動くようになりました！これで前に進むことができます、改めて感謝いたします！