JavaScript div領域の座標を取得したい

前提・実現したいこと

Javacriptでdiv領域にマウスが入ったらdiv上の座標を取得する方法はありませんでしょうか？
e.clientX、e.clientYだとページ全体になってしまうので、これをdiv領域上でやる方法はありませんでしょうか？

動きませんがこのようなことがやりたい

Javacript
1<script>
2window.onload=function(){
3a=document.createElement("div");
4a.id="a";
5a.style.width="300px";
6a.style.height="300px";
7a.style.background="red";
8document.body.appendChild(a);
9a.addEventListener("mousemove",function(){
10x.innerText=a.clientX;//a上の領域を起点としたマウス座標をとりたい
11y.innerText=a.clientY;//a上の領域を起点としたマウス座標をとりたい
12},false);
13}
14</script>
15
16<div id="x"><\div>
17<div id="y"></div>

行動規範の内容に同意します

回答1件

ベストアンサー

下記のようなことでしょうか。

html
1<script>
2  window.onload=function(){
3    a=document.createElement("div");
4    a.id="a";
5    a.style.width="300px";
6    a.style.height="300px";
7    a.style.background="red";
8    document.body.appendChild(a);
9    a.addEventListener("mousemove",function(e){
10      x.innerText=e.offsetX;//a上の領域を起点としたマウス座標をとりたい
11      y.innerText=e.offsetY;//a上の領域を起点としたマウス座標をとりたい
12    },false);
13  }
14</script>
15
16<div id="x"></div>
17<div id="y"></div>