[JS] イベントリスナーをネストしたい

Question

mousedown された後にmousemoveすることなくmouseupした時に発火するイベントを登録したいのですが、そんなことは可能でしょうか？
addEventListenerの概念からして、条件分岐はできないように思えます。
やりたいことのフローとしては以下のようなコードになります。

    document.addEventListener('mousedown', function() {

      var checkMousemove = false; // デフォはfalse

      document.addEventListener('mousemove', function() {
        checkMousemove = true; //mosuemoveがあった際はtrue
        console.log(checkMousemove);
      } );

      if( !checkMousemove ) { //checkMousemoveがfalseの時
        document.addEventListener('mouseup', pageTransition );
      }

    });

しかし、これだとjsファイルロード時にaddEventListener全てが実行されていて、ネストされていませんでした。
何か解決策がありましたらご教授いただけると幸いです。

目的

目的を記述していなくてすみません。

前回、canvas内で、mousedownイベントが効かない問題について質問しました。
https://teratail.com/questions/333161

原因はtrackBollControllsというライブラリの中に、mouse系のイベントをキャンセルする記述が書かれていたので、その行を消したらイベントが有効になり、raycasterで感知したオブジェクトのuserDataであるハイパーリンクを取り出しページ遷移するという機能を実装でき、ここまでは良かったのですが。

canvas内ではドラッグのような挙動でカメラをグリグリ回しているので、ドラッグのような挙動をしたくて一回mousedownするとrayが発射してしまい、それを防ぐためにmouseupイベントに変更したのですが、ドラッグのような挙動が終わってmouseupしたところに3Dモデルがあるとそこでもrayを発射してしまいイベントが発生してしまいます。

それを防ぐために、mousedownしてからmousemoveなしでmouseupした際にイベントを発火できたら良いのではと非エンジニアの方からアイデアをいただいたのですが、うまくいかず。

他に全く違う観点から何か解決策がありましたら知恵を貸していただけると幸いです。

Comments

[yambejp]

目的はなんでしょう

Answer 1

addEventListeneは一回だけ実行するようにしないと、複数登録されてしまいます。

var checkMousemove;

document.addEventListener('mousedown', function() {
  checkMousemove = false;
});

document.addEventListener('mousemove', function() {
  checkMousemove = true; //mosuemoveがあった際はtrue
} );

document.addEventListener('mouseup', function() {
    if (!checkMousemove) {
      checkMousemove = false;
      pageTransition();
    }
} );


var pageTransition = function() { console.log("pageTransition");}

Comments

[rihako]

ありがとうございます！試してみます！

Answer 2

これってネストの処理必要でしょうか？

var checkMousemove;
document.addEventListener('mousedown', ()=>{
  checkMousemove = true;
});
document.addEventListener('mousemove', ()=> {
  checkMousemove = false;
} );
document.addEventListener('mouseup', ()=>{
  if(checkMousemove) console.log("ok");
});

Comments

[rihako]

確かに！ネストいらないかもです。
試してみます！ありがとうございます。

Answer 3

お二方回答ありがとうございました。
これで無事解決しました。

    var checkMousedown;
    var checkMousemove;

    document.addEventListener('mousedown', ()=>{
      checkMousedown = true;
      checkMousemove = false;
    });
    document.addEventListener('mousemove', ()=> {
      checkMousemove = true;
    } );
    document.addEventListener('mouseup', (event)=>{
      if(checkMousedown && !checkMousemove) {
        pageTransition(event);
      }
      checkMousedown = false;
      checkMousemove = false;
    });