EventListenerの管理

前提・実現したいこと

マウスを画面内でドラッグして、その方向に速度dzを加速or減速したい。

発生している問題・エラーメッセージ

エラーは出ませんでした。
問題はmouseup後もmousemoveの処理が継続されたのかdxの値、それに伴いdzの値がカーソルの素の動きに応じて変動することです。
mouse.yの値は再びmousedownするまでそのままの値でした。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1"/>
5  <title>My Project</title>
6</head>
7<body>
8  <div id="stage"></div>
9 <script src="js/three.min.js"></script>
10  <script src="js/main.js"></script>
11</body>
12</html>

javascript
1  const stage = document.getElementById('stage');
2  let dz = 0;
3  const mouse = new THREE.Vector2();
4
5  stage.addEventListener('mousedown', (e) => {
6    const rect = e.target.getBoundingClientRect();
7    mouse.y = (e.clientY - rect.top) / height * -1 * 2 + 1;
8
9    stage.addEventListener('mousemove', element => {
10      dragging(width, height, mouse.y, element, rect);
11    });
12  });
13
14  stage.addEventListener('mouseup', () => {
15    stage.removeEventListener('mousemove', element => {
16      dragging(width, height, mouse.y, element, rect);
17    });
18  });
19
20
21  function dragging(width, height, mouseY, element, rect) {
22    console.log('mouseY: ' + mouseY); //////////
23    const dragMouseY = (element.clientY - rect.top) / height * -1 * 2 + 1;
24    const dx = dragMouseY - mouseY;
25    console.log('dx: ' + dx); //////////
26    dz += dx / 100; // 加速
27    console.log('dz: ' + dz);　//////////
28  }

試したこと

該当コードのように /////////のついた行にmouse.yとdxとdzの値を出力
下記コードの第二引数をdraggingに　→　同症状

stage.removeEventListener('mousemove', element => {
      dragging(width, height, mouse.y, element, rect);
    });

補足情報（FW/ツールのバージョンなど）

dotinstallのローカル開発環境の構築 [macOS編]
をお手本に環境構築

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

回答1件

ベストアンサー

EventListenerの管理

マウスイベントでは、伝搬された情報（event）はマウス操作に応じて常に変化します。

mousedown, mousemove, mouseup の各イベントリスナから参照できるスコープに ポインタ座標 や ボタン押下状態 を保持する変数を用意しておくことで、押下した瞬間の座標を移動中に参照したりできます。

javascript
1// ポインタの座標を保持する例
2let downPos = { x:0, y:0 };
3
4let msMove = (event) => {
5  console.log( downPos.x, downPos.y, event.clientX, event.clientY );
6}
7
8document.body.addEventListener("mousedown", event => {
9  downPos.x = event.clientY;
10  downPos.y = event.clientX;
11
12  document.body.addEventListener("mousemove", msMove ); // 下記参照
13})
14
15
16document.body.addEventListener("mouseup", event => {
17  console.log( downPos.x, downPos.y, event.clientX, event.clientY );
18
19  document.body.removeEventListener("mousemove", msMove ); // 下記参照
20})

リスナの管理としては、押下時にアタッチされ、開放時にデタッチされるイベントリスナ msMove が同一の関数オブジェクトとする必要がありますので、ポインタ座標やボタン状態と同様に、スコープの外で保持する変数を宣言しておく必要があります（この例では、関数宣言もスコープ外で行いました）。

投稿2020/03/21 13:12

編集2020/03/21 13:19

AkitoshiManabe

総合スコア5434

cl_

2020/03/22 07:36

同一の関数オブジェクトとは処理と登場する変数が同一ということですか。

AkitoshiManabe

2020/03/22 08:11

そんなイメージです。関数は処理内容が同じでも関数宣言した時点で新しいメモリ領域を確保すると考えてください。removeEventListener() の第二引数で関数宣言する記述だと、アタッチされていない関数と解釈されてしまい、デタッチできません。なので、addEventListener("type", listener=(e)=>{/* omitted */} ) のように、変数にはメモリ上にある関数を覚えさせておき、デタッチする際に removeEventListener("type", listener) のように同じメモリ領域の関数を与える必要があります。

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