回答編集履歴
3
追記
answer
CHANGED
|
@@ -17,6 +17,12 @@
|
|
|
17
17
|
※ window 表示の PC用ブラウザなどは、押下したままウィンドウ枠の外でマウスボタンの開放なども発生しうるので focus / blur など、他のイベントを補助的に利用するなどして対策します。
|
|
18
18
|
|
|
19
19
|
----
|
|
20
|
+
追記）コメントを受けて
|
|
21
|
+
状態の変化に応じてイベントが発火していますので、実際の操作と紐付けて考えます。
|
|
22
|
+
* [マウスイベントを可視化する](https://takamints.hatenablog.jp/entry/mouseenter-vs-mouseover) ... 実際の操作に対応するイベント発生状況が確認できます。
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
----
|
|
20
26
|
> ドラッグドロップの練習として
|
|
21
27
|
|
|
22
28
|
マウスイベントだけで実装する以外に、[MDN：ドラッグ操作](https://developer.mozilla.org/ja/docs/DragDrop/Drag_Operations)でもドラッグ＆ドロップを学習できると思います
|
2
追記2
answer
CHANGED
|
@@ -3,7 +3,9 @@
|
|
|
3
3
|
|
|
4
4
|
``classList.add()`` と、``table.addEventListener('mouseup',mup,false);`` は、 mousedown に移動しても動作するのではないでしょうか。
|
|
5
5
|
特に、後者の「イベントリスナのアタッチ」が連続的に行われる点は絶対に修正すべきです。
|
|
6
|
+
(際限のない多重登録が影響し、mouseup時に全リスナ実行（ラグ発生）するので、「置き去り」現象になっています)
|
|
6
7
|
|
|
8
|
+
|
|
7
9
|
マウス関連の mousedown, mousemove, mouseup を３つセットで用いるベントは
|
|
8
10
|
発火頻度も考慮して実装します。
|
|
9
11
|
|
1
追記
answer
CHANGED
|
@@ -12,4 +12,12 @@
|
|
|
12
12
|
（リフレッシュレートが高い閲覧環境では何回かに１度にすることも検討する）
|
|
13
13
|
3. mouseup ... クリーンナップ（2. 3. のイベントリスナをデタッチ）
|
|
14
14
|
|
|
15
|
-
※ window 表示の PC用ブラウザなどは、押下したままウィンドウ枠の外でマウスボタンの開放なども発生しうるので focus / blur など、他のイベントを補助的に利用するなどして対策します。
|
|
15
|
+
※ window 表示の PC用ブラウザなどは、押下したままウィンドウ枠の外でマウスボタンの開放なども発生しうるので focus / blur など、他のイベントを補助的に利用するなどして対策します。
|
|
16
|
+
|
|
17
|
+
----
|
|
18
|
+
> ドラッグドロップの練習として
|
|
19
|
+
|
|
20
|
+
マウスイベントだけで実装する以外に、[MDN：ドラッグ操作](https://developer.mozilla.org/ja/docs/DragDrop/Drag_Operations)でもドラッグ＆ドロップを学習できると思います
|
|
21
|
+
（ページ左のメニューにある「イベント」セクションで案内されている各イベントも要チェック）。
|
|
22
|
+
|
|
23
|
+
[DragEvent](https://developer.mozilla.org/ja/docs/Web/API/DragEvent) は MouseEvent を継承しているので、ご質問のようなMouse操作と同様に座標取得ができます。
|