回答編集履歴
3
追記
test
CHANGED
@@ -36,6 +36,18 @@
|
|
36
36
|
|
37
37
|
----
|
38
38
|
|
39
|
+
追記)コメントを受けて
|
40
|
+
|
41
|
+
状態の変化に応じてイベントが発火していますので、実際の操作と紐付けて考えます。
|
42
|
+
|
43
|
+
* [マウスイベントを可視化する](https://takamints.hatenablog.jp/entry/mouseenter-vs-mouseover) ... 実際の操作に対応するイベント発生状況が確認できます。
|
44
|
+
|
45
|
+
|
46
|
+
|
47
|
+
|
48
|
+
|
49
|
+
----
|
50
|
+
|
39
51
|
> ドラッグドロップの練習として
|
40
52
|
|
41
53
|
|
2
追記2
test
CHANGED
@@ -7,6 +7,10 @@
|
|
7
7
|
``classList.add()`` と、``table.addEventListener('mouseup',mup,false);`` は、 mousedown に移動しても動作するのではないでしょうか。
|
8
8
|
|
9
9
|
特に、後者の「イベントリスナのアタッチ」が連続的に行われる点は絶対に修正すべきです。
|
10
|
+
|
11
|
+
(際限のない多重登録が影響し、mouseup時に全リスナ実行(ラグ発生)するので、「置き去り」現象になっています)
|
12
|
+
|
13
|
+
|
10
14
|
|
11
15
|
|
12
16
|
|
1
追記
test
CHANGED
@@ -27,3 +27,19 @@
|
|
27
27
|
|
28
28
|
|
29
29
|
※ window 表示の PC用ブラウザなどは、押下したままウィンドウ枠の外でマウスボタンの開放なども発生しうるので focus / blur など、他のイベントを補助的に利用するなどして対策します。
|
30
|
+
|
31
|
+
|
32
|
+
|
33
|
+
----
|
34
|
+
|
35
|
+
> ドラッグドロップの練習として
|
36
|
+
|
37
|
+
|
38
|
+
|
39
|
+
マウスイベントだけで実装する以外に、[MDN:ドラッグ操作](https://developer.mozilla.org/ja/docs/DragDrop/Drag_Operations)でもドラッグ&ドロップを学習できると思います
|
40
|
+
|
41
|
+
(ページ左のメニューにある「イベント」セクションで案内されている各イベントも要チェック)。
|
42
|
+
|
43
|
+
|
44
|
+
|
45
|
+
[DragEvent](https://developer.mozilla.org/ja/docs/Web/API/DragEvent) は MouseEvent を継承しているので、ご質問のようなMouse操作と同様に座標取得ができます。
|