JavaScriptのmousemoveイベントの停止方法について

javascriptでスライドショーのスワイプ機能を作りたいです。

JavaScript
1slider.addEventListener('mousedown', function(e) {
2    e.preventDefault();
3    startMx = e.pageX;
4    console.log(startMx);
5
6    slider.addEventListener('mousemove', function(e) {
7        e.preventDefault();
8        moveMx = e.pageX;
9        console.log(moveMx);
10    });
11    
12});
13
14slider.addEventListener("mouseup",function(e) {
15    if(startMx > moveMx && startMx > dist + moveMx) {
16        right();
17    }
18    if(startMx < moveMx && startMx < dist + moveMx) {
19        left();
20    }
21});

mousedownした後にmousemoveの処理が実行されるのですが、mouseupをした時にmousemoveの処理が終了させたいです。

色々と検索してみて、setIntervalを利用してmousemoveの処理を終了させることができるのは分かったのですが、コートが書かれていませんでした。

setIntervalを用いた具体的なコード、若しくはその他の処理の終了させる方法をご存知でしたら、ご教授頂けたら幸いです。

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

回答1件

ベストアンサー

ボタン押下でアタッチするなら、
ボタン開放でデタッチしてはでどうでしょ？

javascript
1let slider_onmousemove = function(e) {
2    e.preventDefault();
3    moveMx = e.pageX;
4    console.log(moveMx);
5};
6
7slider.addEventListener('mousedown', function(e) {
8    e.preventDefault();
9    startMx = e.pageX;
10    console.log(startMx);
11    
12    slider.addEventListener('mousemove', slider_onmousemove);
13
14});
15
16slider.addEventListener("mouseup",function(e) {
17    if(startMx > moveMx && startMx > dist + moveMx) {
18        right();
19    }
20    if(startMx < moveMx && startMx < dist + moveMx) {
21        left();
22    }
23
24    slider.removeEventListener('mousemove', slider_onmousemove )
25
26});