回答編集履歴

2

説明追記

2021/10/04 13:04

投稿

hatena19
hatena19

スコア34075

test CHANGED
@@ -35,3 +35,27 @@
35
35
  }
36
36
 
37
37
  ```
38
+
39
+
40
+
41
+ ---
42
+
43
+ CSSの設定で回避できましたが、
44
+
45
+ jsだけでなぜうまくいかないのか、気になったので調べてみました。
46
+
47
+ イベントのバブリングは、この場合、原因ではないような気がしたので。
48
+
49
+
50
+
51
+ 原因は、下記に記述のある座標値の原点の問題だと思います。
52
+
53
+
54
+
55
+ [event.offsetX,Yの罠...どこが原点の座標値なのかを理解する (currentTargetとtarget) - Qiita](https://qiita.com/yukiB/items/cc533fbbf3bb8372a924)
56
+
57
+ > この場合,event.offsetX,Yで取得される座標値は,そのイベントハンドラが付与されている要素(boxA)の左上を原点としたものではなく,マウスが載っている要素(boxB)の左上を原点とした座標値になります.
58
+
59
+
60
+
61
+ 上記には、座標値の変換方法の記載もありますが、かなり面倒なので、CSSで回避するほうがシンプルですね。

1

説明追記

2021/10/04 13:04

投稿

hatena19
hatena19

スコア34075

test CHANGED
@@ -15,3 +15,23 @@
15
15
  }
16
16
 
17
17
  ```
18
+
19
+
20
+
21
+ ---
22
+
23
+ マウスイベントを無効にした方がいいかな。
24
+
25
+ ```css
26
+
27
+ .DIVs span {
28
+
29
+
30
+
31
+ position: absolute;
32
+
33
+ pointer-events: none;
34
+
35
+ }
36
+
37
+ ```