回答編集履歴
2
説明追記
answer
CHANGED
|
@@ -16,4 +16,16 @@
|
|
|
16
16
|
position: absolute;
|
|
17
17
|
pointer-events: none;
|
|
18
18
|
}
|
|
19
|
-
```
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
CSSの設定で回避できましたが、
|
|
23
|
+
jsだけでなぜうまくいかないのか、気になったので調べてみました。
|
|
24
|
+
イベントのバブリングは、この場合、原因ではないような気がしたので。
|
|
25
|
+
|
|
26
|
+
原因は、下記に記述のある座標値の原点の問題だと思います。
|
|
27
|
+
|
|
28
|
+
[event.offsetX,Yの罠...どこが原点の座標値なのかを理解する (currentTargetとtarget) - Qiita](https://qiita.com/yukiB/items/cc533fbbf3bb8372a924)
|
|
29
|
+
> この場合，event.offsetX，Yで取得される座標値は，そのイベントハンドラが付与されている要素(boxA)の左上を原点としたものではなく，マウスが載っている要素(boxB)の左上を原点とした座標値になります．
|
|
30
|
+
|
|
31
|
+
上記には、座標値の変換方法の記載もありますが、かなり面倒なので、CSSで回避するほうがシンプルですね。
|
1
説明追記
answer
CHANGED
|
@@ -6,4 +6,14 @@
|
|
|
6
6
|
position: absolute;
|
|
7
7
|
z-index: -1;
|
|
8
8
|
}
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
マウスイベントを無効にした方がいいかな。
|
|
13
|
+
```css
|
|
14
|
+
.DIVs span {
|
|
15
|
+
|
|
16
|
+
position: absolute;
|
|
17
|
+
pointer-events: none;
|
|
18
|
+
}
|
|
9
19
|
```
|