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

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

新たな問題が出てきた為、新しく作りました
div領域内にimgをposition:absoluteで配置したところ、
imgをマウスで通過するとimgの座標となってしまいます
imgの座標を無視してdivのマウス座標をずっと監視できませんか？
この問題の解決策があれば、教えていただきたいです

javascript
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    i=document.createElement("img");
10    i.style.position="absolute";
11    i.style.top="60px";
12    i.style.left="170px";
13    i.style.width="50px";
14    i.style.height="50px";
15    i.src="https://image.flaticon.com/icons/png/512/1088/1088537.png";
16    a.appendChild(i);
17    a.addEventListener("mousemove",function(e){
18      x.innerText=e.offsetX;//a上の領域を起点としたマウス座標をとりたい
19      y.innerText=e.offsetY;//a上の領域を起点としたマウス座標をとりたい
20    },false);
21  }
22</script>
23
24<div id="x"></div>
25<div id="y"></div>

miyabi_pudding

2020/10/21 02:31 編集

div#a 要素の配置は、ブラウザ画面に対して常に左上ですか？（これ如何で多少難易度変化あります）

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

回答1件

ベストアンサー

下記でどうでしょうか。

js
1window.onload=function(){
2  a=document.createElement("div");
3  a.id="a";
4  a.style.width="300px";
5  a.style.height="300px";
6  a.style.background="red";
7  document.body.appendChild(a);
8  i=document.createElement("img");
9  i.style.position="absolute";
10  i.style.top="60px";
11  i.style.left="170px";
12  i.style.width="50px";
13  i.style.height="50px";
14  i.src="https://image.flaticon.com/icons/png/512/1088/1088537.png";
15  a.appendChild(i);
16  a.addEventListener("mousemove",function(e){
17    var target_rect = e.currentTarget.getBoundingClientRect();
18    x.innerText = e.clientX - target_rect.left;
19    y.innerText = e.clientY - target_rect.top;
20  },false);
21}